jQuery異步調(diào)用頁面后臺實(shí)例分析
作者：李玉欣
本文列舉了兩個(gè)簡單的例子，來介紹jQuery異步調(diào)用頁面后臺方法‏,方便大家學(xué)習(xí)和參考
jQuery調(diào)用頁面后臺方法如下：
給出了兩個(gè)簡單的例子，無參數(shù)的和有參數(shù)的，返回的都是json數(shù)據(jù)。
- <%@ 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() + "\"}]";
- }
- }
- }
注意點(diǎn)：
(1) url的填寫格式 url+"/method name"
(2) contentType: "application/json; charset=utf-8", 這個(gè)必須要有
(3) 返回?cái)?shù)據(jù)的類型為json
(4) data:"{days:1}",參數(shù)的傳遞
(5) 后臺的方法必須是public static 而且還要有 [WebMethod]特性修飾
原文鏈接：http://www.cnblogs.com/liyuxin/archive/2011/03/01/1967776.html
【編輯推薦】
責(zé)任編輯：陳貽新
來源：
李玉欣的博客
