ajax無重新整理調用,有多種方法如(webservice(.asmx),ashx頁面,還有的是調用[WebMethod]方法)
現在說的是ajax調用[WebMethod]方法
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="test2.WebForm3" %><!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 src="jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function ADD() { //WebForm3.aspx/add表示頁面裡面add方法 這裡的num1,num2 必須和方法裡面的參數名稱一樣! var result = Invoke("WebForm3.aspx/add", { "num1": 4, "num2": 5 }); alert(result.toString()); } //把字串轉化成json function json2str(o) { var arr = []; var fmt = function (s) { if (typeof s == 'object' && s != null) return json2str(s); return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s; } for (var i in o) arr.push("'" + i + "':" + fmt(o[i])); return '{' + arr.join(',') + '}'; } //type:請求的類型,這裡必須用post 。WebMethod方法只接受post類型的請求。 //contentType:發送資訊至伺服器時內容編碼類別型。我們這裡一定要用 application/json 。 //url:請求的伺服器端處理常式的路徑,格式為"檔案名稱(含尾碼)/方法名" //data:參 數列表。注意,這裡的參數一定要是json格式的字串,記住是字串格式,如:"{aa:11,bb:22,cc:33 , ...}"。如果你寫的不是字串,那jquery會把它實序列化成字串, //那麼在伺服器端接受到的就不是json格式了,且不可為空,即使沒有參數也要 寫成"{}",如上例。很多人不成功,原因就在這裡。 //dataType:伺服器返回的資料類型。必須是json,其他的都無效。因為 webservice 是一json格式返回資料的,其形式為:{"d":"......."}。 //success:請求成功後的回呼函數。你可以在這裡對返回的資料做任意處理。 //error:請求失敗後的回呼函數。你可以在這裡對返回的資料做任意處理。 function Invoke(url, param) { var result; $.ajax({ type: "POST", url: url, async: false, data: json2str(param), contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { result = msg.d; }, error: function (r, s, e) { alert(s); } }); return result; } </script></head><body> <form id="form1" runat="server"> <div> <input type="button" onclick="ADD()" value="調用函數"> </div> </form></body></html>
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Xml;using System.Web.Services;namespace test2{ public partial class WebForm3 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } //必須為static靜態方法 [WebMethod] public static int add(int num1,int num2) { return num1 + num2; } }}
運行結果:
具體的原理,我會再說完3種互動的方法再做一個總結!