最近研究了一下ajax，查了一下，向后台傳入數據，或者從后台拿到數據，json語句是比較輕量級的，所以隨之也就學了一下json語句：
首先采用jquery內部封裝好的方法是比較簡單的，我們只需做的就是修改里面的一些配置：
以下代碼是對$.ajax()的解析：
1 $.ajax({ 2 type: "POST", //提交方式 3 contentType: "application/json; charset=utf-8", //內容類型 4 dataType: "json", //類型 5 url: "前台地址/后台方法", //提交的頁面，方法名 6 data: "parameter", //參數，如果沒有，可以為null 7 success: function (data) { //如果執行成功，那么執行此方法 8 alert(data.d); //用data.d來獲取后台傳過來的json語句，或者是單純的語句 9 }, 10 error: function (err) { //如果執行不成功，那么執行此方法 11 alert("err:" + err); 12 } 13 });
當然我初次學習的時候，看到這些也是有些茫然的，因為不知道到如何才能將其用到自己的程序里面，所以就寫了一個小的檢測網頁來測試一下，如果你測試的時候沒有達到你想要的結果，那么希望你回頭看一下，前台是否寫的有問題，或者是參考一下下文中的注意事項吧。
前台代碼 ：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="number3.aspx.cs" Inherits="ajax1.number3" %> <!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>測試ajax</title> <script src="js/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> function testAjax() { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", dataType: "json", url: "number3.aspx/GetJson",//傳入后台的地址/方法 data: "{'RID':'123'}",//參數，這里是一個json語句 success: function (data) { var result = data.d; alert(result); }, error: function (err) { alert("err:" + err); } }); } </script> </head> <body> <form id="form1" runat="server"> <div> <button onclick="testAjax();">用button測試ajax</button> <input type="button" value="testAjax" onclick="testAjax();" /> </div> </form> </body> </html>
后台代碼：
1 using System; 2 using System.Web.Services; 3 namespace ajax1 4 { 5 public partial class number3 : System.Web.UI.Page 6 { 7 protected void Page_Load(object sender, EventArgs e) 8 { 9 10 } 11 [WebMethod] 12 public static string GetJson(string RID) 13 { 14 return "{'ID':'" + RID + "'}"; 15 } 16 } 17 }
后台代碼中以黃色為背景的就是我們要注意的地方：
1.using System.Web.Services;對應下面的[WebMethod]這個一定要加上的。
2.后台寫的方法一定是公共靜態的即一定是public static開頭的。
3.參數一定是前台的data所傳參數的鍵
前台中要注意的地方：
1.大家應該會注意到，前台我用的是兩個button來測試，但是第一個<button>是不行的，頁面會刷新一下，其實這都是<form id="form1" runat="server">這行代碼的問題，<button>標簽會提交本頁面的內容，從而導致異步刷新失敗。所以建議大家不要用<button>標簽。但是如果不得不用的話，解決辦法還是有的，目前我知道的只有兩個：
①：將<form id="form1" runat="server">代碼去掉，當然如果本頁面有要提交的內容就會很麻煩了
②：將<button onclick="aaa();return false;">用button測試ajax</button>代碼改為：<button onclick="aaa();return false;">用button測試ajax</button>
2。前台的測試結果是：
那么我們如何來只獲取json后面的值，而不是整個json語句呢，我們可以將json語句對象化，然后根據鍵來取得對應的值：前台的testAjax()的方法改為：
function testAjax() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "number3.aspx/GetJson",
data: "{'RID':'123'}",
success: function (data) {
var result = eval("(" + data.d + ")");//這句話是將json語句對象化
alert(result.ID);
},
error: function (err) {
alert("err:" + err);
}
});
}
此時結果為：
以上就是初步學習json當時遇到的問題所留下的經驗。同時我想驗證一下是否能夠在后台重載方法來實現根據前台的data是否有參數來判斷要執行的方法，所以我將代碼改動了一下：
改動后的前台代碼
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="number3.aspx.cs" Inherits="ajax1.number3" %> 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 <head runat="server"> 7 <title>測試ajax</title> 8 <script src="js/jquery-1.4.1.js" type="text/javascript"></script> 9 <script type="text/javascript" language="javascript"> 10 function testAjax() { 11 $.ajax({ 12 type: "POST", 13 contentType: "application/json; charset=utf-8", 14 dataType: "json", 15 url: "number3.aspx/GetJson", 16 data: "{'RID':'123'}", 17 success: function (data) { 18 var result = eval("(" + data.d + ")"); 19 alert(result.ID); 20 }, 21 error: function (err) { 22 alert("err:" + err); 23 } 24 }); 25 } 26 function aaa() { 27 $.ajax({ 28 type: "POST", 29 contentType: "application/json; charset=utf-8", 30 dataType: "json", 31 url: "number3.aspx/GetJson", 32 success: function (data) { 33 alert(data.d); 34 }, 35 error: function (err) { 36 alert("err:" + err); 37 } 38 }); 39 } 40 </script> 41 </head> 42 <body> 43 <form id="form1" runat="server"> 44 <div> 45 <button onclick="testAjax();return false;">用button測試ajax</button> 46 <input type="button" value="testAjax" onclick="testAjax();" /> 47 <input type="button" value="aaa" onclick="aaa();" /> 48 </div> 49 </form> 50 </body> 51 </html>
改動后的后台代碼
1 using System; 2 using System.Web.Services; 3 namespace ajax1 4 { 5 public partial class number3 : System.Web.UI.Page 6 { 7 protected void Page_Load(object sender, EventArgs e) 8 { 9 10 } 11 [WebMethod] 12 public static string GetJson() 13 { 14 return "hello ajax"; 15 } 16 [WebMethod] 17 public static string GetJson(string RID) 18 { 19 return "{'ID':'" + RID + "'}"; 20 } 21 } 22 }
所得的效果為：
第一個和第二個按鈕點擊后效果為：
第三個按鈕點擊后效果為：
所以我的初步結論為：后台的重構函數是不成功的，如果有的重構參數的話，只會執行帶參數的，而不會執行那個不帶參數的。現在還不是太明白為什么會這樣，所以希望明白原理的分享一下自己的觀點。當然這只是個人觀點，如若有誤，望請指正。