通過 ajax() 與 一般處理程式,請求資料庫數據,實現界面無刷新。 Jquery ajax 請求參數詳細說明 http://www.w3school.com.cn/jquery/ajax_ajax.asp 代碼: 1 <!DOCTYPE html> 2 3 <html xmlns="http:/
通過 ajax() 與 一般處理程式,請求資料庫數據,實現界面無刷新。
Jquery ajax 請求參數詳細說明 http://www.w3school.com.cn/jquery/ajax_ajax.asp
代碼:
-
1 <!DOCTYPE html> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head runat="server"> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 6 <title></title> 7 <script src="jquery-1.3.2-vsdoc2.js"></script> 8 </head> 9 <body> 10 <form id="form1" runat="server"> 11 <div style="margin: 50px;"> 12 <input value="點擊" type="button" id="btn"/> 13 </div> 14 </form> 15 <script type="text/javascript"> 16 $(document).ready(function () { 17 $('#btn').click(function () { 18 $.ajax({ 19 url: 'ashx/Handler1.ashx',//string類型的參數,發送請求的地址 20 type: 'POST',//請求方式(post or get)預設為get 21 contenType: "application/json;charset-utf-8",//發送信息至伺服器時內容編碼類型 22 dataType: 'text',//預期伺服器返回的數據類型 23 data: {},//發送的請求數據 24 success: function (data) { 25 alert(data); 26 } 27 }); 28 }); 29 }) 30 </script> 31 </body> 32 </html>
1 using System.Web; 2 3 namespace DemoAjxa.ashx 4 { 5 /// <summary> 6 /// Handler1 的摘要說明 7 /// </summary> 8 public class Handler1 : IHttpHandler 9 { 10 11 public void ProcessRequest(HttpContext context) 12 { 13 context.Response.ContentType = "text/plain"; 14 15 context.Response.Write("Hello World"); 16 } 17 18 public bool IsReusable 19 { 20 get 21 { 22 return false; 23 } 24 } 25 } 26 }
效果:
上面是post請求,獲得純文本字元串,如果是要獲得json 數據的話
則需要將ajax 的參數dataType設為 josn,一般處理程式 context.Response.Write();返回的數據類型也必須是json 格式哦
然後將獲得的json 數據解析並綁定到界面上
列: dataType: 'json',//預期伺服器返回的數據類型
data{name:'huangenai'}如果data帶參數,
在一般處理程式這樣可以獲得傳過來的參數
string name=context.Request["name"].ToString();
關於請求返回為error
1.查看 url 請求地址是否正確
火狐瀏覽器,安裝插件 Firebug,F12可以看到報錯了 顯示請求地址NotFound
2.data{} 即時不傳參數也要這樣寫上哦,不然會報錯的
3.返回的數據類型是否與 dataType 一致
如果不一致則會報錯
4.檢查時否發生了跨域的請求
5.編碼格式是否正確
當然也可以在代碼中這樣寫,將錯誤輸出查看到底是什麼錯誤
1 <script type="text/javascript"> 2 $(document).ready(function () { 3 $('#btn').click(function () { 4 $.ajax({ 5 url: 'ashx/Handler1.ashx',//string類型的參數,發送請求的地址 6 type: 'POST',//請求方式(post or get)預設為get 7 contenType: "application/json;charset-utf-8",//發送信息至伺服器時內容編碼類型 8 dataType: 'text',//預期伺服器返回的數據類型 9 data: {name:'huangenai'},//發送的請求數據 10 success: function (data) { 11 alert(data); 12 }, error: function (XMLHttpRequest) { 13 alert("Ajax請求失敗,錯誤狀態為:"+XMLHttpRequest.status); 14 } 15 }); 16 }); 17 }) 18 </script>
效果:
XMLHttpRequest 對象
屬性
readyState:請求狀態,開始請求時值為0直到請求完成這個值增長到4(readyState共有5中狀態,0未初始化,1已初始化,2發送請求,3開始接收結果,4接收結果完畢。)
responseText:目前為止接收到的響應體,readyState<3此屬性為空字元串,=3為當前響應體,=4則為完整響應體
responseXML:伺服器端相應,解析為xml並作為Document對象返回
status:伺服器端返回的狀態碼,=200成功,=404表示“Not Found”
statusText:用名稱表示的伺服器端返回狀態,對於“OK”為200,“Not Found”為400