zoukankan      html  css  js  c++  java
  • jquery异步调用页面后台方法‏

    jquery调用页面后台方法‏如下:

    给出了两个简单的例子,无参数的和有参数的,返回的都是json数据。

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryCSMethodForm.aspx.cs" Inherits="JQuerWeb.JqueryCSMethodForm" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head runat="server">

        <title></title>

        <script type="text/javascript" src="JS/jquery-1.4.2.js"></script>

       

        <script type="text/javascript">

            $(document).ready(function() {

                $("input[type='button'][value='GetDate']").click(function() {

                    $.ajax({

                        type: "post",

                        url: "JqueryCSMethodForm.aspx/GetNowDate",

                        datatype: "json",

                        contentType: "application/json; charset=utf-8",

                        success: function(data) {

                            $("input#showTime").val(eval('(' + data.d + ')')[0].nowtime);

                        },

                        error: function(XMLHttpRequest, textStatus, errorThrown) {

                            alert(errorThrown);

                        }

                    });

                });

                $("input[type='button'][value='GetOneDayLater']").click(function() {

                    $.ajax({

                        type: "post",

                        url: "JqueryCSMethodForm.aspx/GetOneDayLate",

                        data:"{days:1}",

                        datatype: "json",

                        contentType: "application/json; charset=utf-8",

                        success: function(data) {

                            $("input#showTime").val(eval('(' + data.d + ')')[0].nowtime);

                        },

                        error: function(XMLHttpRequest, textStatus, errorThrown) {

                        alert(errorThrown);

                        }

                    });

                });

            });

          

        </script>

    </head>

    <body>

        <form id="form1" runat="server">

        <div>

            <input type="button" value="GetDate" />

            <input type=button value="GetOneDayLater" />

            <input type="text" id="showTime" />

        </div>

        </form>

    </body>

    </html>

    CS代码:

     

    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Web;

    using System.Web.UI;

    using System.Web.UI.WebControls;

    using System.Web.Services;

    namespace JQuerWeb

    {

        public partial class JqueryCSMethodForm : System.Web.UI.Page

        {

           

            protected void Page_Load(object sender, EventArgs e)

            {

              

            }

            [WebMethod]

            public static String GetNowDate()

            {

                return "[{\"nowtime\":\"" + DateTime.Now.ToShortDateString() + "\"}]";

            }

            [WebMethod]

            public static String GetOneDayLate(Int32 days)

            {

                return "[{\"nowtime\":\"" + DateTime.Now.AddDays(days).ToShortDateString() + "\"}]";

            }

        }

    }

    注意点:

    (1) url的填写格式 url+"/method name"

    (2) contentType: "application/json; charset=utf-8", 这个必须要有

    (3) 返回数据的类型为json

    (4) data:"{days:1}",参数的传递

    (5)  后台的方法必须是public static 而且还要有 [WebMethod]特性修饰

  • 相关阅读:
    centos6.5 升级安装pcre 8.39版本
    解决MongoDB磁盘IO问题的三种方法
    javascript 利用匿名函数对象给你异步回调方法传参数
    spring mvc fastJson 自定义类型转换(返回数据) 实现对ObjectId类型转换
    Java BigDecimal 加减乘除运算
    OKHTTP 3.0
    Chrome 开发者工具中的命令菜单
    vuex 基础:教程和说明
    RxJS 简介:可观察对象、观察者与操作符
    CreateJs入门必知必会
  • 原文地址:https://www.cnblogs.com/hyd309/p/1968061.html
Copyright © 2011-2022 走看看