jQuery异步调用页面后台实例分析-vue页面加载完毕调用函数

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]特性修饰

原文链接：http://www.cnblogs.com/liyuxin/archive/2011/03/01/1967776.html

【编辑推荐】