jquery调用页面后台方法‏

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

前台html代码：

View Code

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryCSMethodForm.aspx.cs" Inherits="JQuerWeb.JqueryCSMethodForm" %>
  2 
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4 
  5 <html xmlns="http://www.w3.org/1999/xhtml" >
  6 
  7 <head runat="server">
  8 
  9     <title></title>
 10 
 11     <script type="text/javascript" src="JS/jquery-1.4.2.js"></script>
 12 
 13     
 14 
 15     <script type="text/javascript">
 16 
 17         $(document).ready(function() {
 18 
 19             $("input[type='button'][value='GetDate']").click(function() {
 20 
 21                 $.ajax({
 22 
 23                     type: "post",
 24 
 25                     url: "JqueryCSMethodForm.aspx/GetNowDate",
 26 
 27                     datatype: "json",
 28 
 29                     contentType: "application/json; charset=utf-8",
 30 
 31                     success: function(data) {
 32 
 33                         $("input#showTime").val(eval('(' + data.d + ')')[0].nowtime);
 34 
 35                     },
 36 
 37                     error: function(XMLHttpRequest, textStatus, errorThrown) {
 38 
 39                         alert(errorThrown);
 40 
 41                     }
 42 
 43                 });
 44 
 45             });
 46 
 47             $("input[type='button'][value='GetOneDayLater']").click(function() {
 48 
 49                 $.ajax({
 50 
 51                     type: "post",
 52 
 53                     url: "JqueryCSMethodForm.aspx/GetOneDayLate",
 54 
 55                     data:"{days:1}",
 56 
 57                     datatype: "json",
 58 
 59                     contentType: "application/json; charset=utf-8",
 60 
 61                     success: function(data) {
 62 
 63                         $("input#showTime").val(eval('(' + data.d + ')')[0].nowtime);
 64 
 65                     },
 66 
 67                     error: function(XMLHttpRequest, textStatus, errorThrown) {
 68 
 69                     alert(errorThrown);
 70 
 71                     }
 72 
 73                 });
 74 
 75             });
 76 
 77         });
 78 
 79        
 80 
 81 </script>
 82 
 83 </head>
 84 
 85 <body>
 86 
 87     <form id="form1" runat="server">
 88 
 89     <div>
 90 
 91         <input type="button" value="GetDate" />
 92 
 93         <input type=button value="GetOneDayLater" />
 94 
 95         <input type="text" id="showTime" />
 96 
 97     </div>
 98 
 99     </form>
100 
101 </body>
102 
103 </html>

CS代码：

View Code

 1 using System;
 2 
 3 using System.Collections.Generic;
 4 
 5 using System.Linq;
 6 
 7 using System.Web;
 8 
 9 using System.Web.UI;
10 
11 using System.Web.UI.WebControls;
12 
13 using System.Web.Services;
14 
15 namespace JQuerWeb
16 
17 {
18 
19     public partial class JqueryCSMethodForm : System.Web.UI.Page
20 
21     {
22 
23         
24 
25         protected void Page_Load(object sender, EventArgs e)
26 
27         {
28 
29            
30 
31         }
32 
33         [WebMethod]
34 
35         public static String GetNowDate()
36 
37         {
38 
39             return "[{\"nowtime\":\"" + DateTime.Now.ToShortDateString() + "\"}]";
40 
41         }
42 
43         [WebMethod]
44 
45         public static String GetOneDayLate(Int32 days)
46 
47         {
48 
49             return "[{\"nowtime\":\"" + DateTime.Now.AddDays(days).ToShortDateString() + "\"}]";
50 
51         }
52 
53     }
54 
55 }

注意点：

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

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

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

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

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