以下介绍Jquery中 Post Get Ajax几种异步请求的使用方法
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Jquery异步请求.WebForm1" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 8 <script src="jquery-2.0.3.js" type="text/javascript"></script> 9 <title></title> 10 <script type="text/javascript"> 11 $(function () { 12 // $.post("Student.ashx", "", function () { },"json"); 13 14 $("#btn").click(function () { 15 var id = $("#stuID").val(); 16 17 18 //data: 返回的数据：XML/JSON/HTML等 19 //textStatus: 请求状态：success/error/notmodified/timeout 4种 20 21 //$.get("GetStudent.ashx", {"id":id}, function (data, textStatus) { 22 // $.each(data, function (i,value) { 23 // alert(value["Name"]); 24 // }); 25 26 //},"json"); 27 28 29 30 // $.post("GetStudent.ashx", {"id": id}, function (data, textStatus) { 31 // $.each(data, function (i,item) { 32 // alert(item.Name); 33 // }); 34 // },"json"); 35 //}) 36 37 38 //alert(responseText);//请求返回的内容 39 //alert(textStatus);//请求状态：success，error 40 //alert(XMLHttpRequest);//XMLHttpRequest对象 41 //全局事件是每次的Ajax请求都会触发的， 42 $.ajax({ 43 url: "GetStudent.ashx", //发送请求的地址 44 type: "Get", //请求方式GET/POST，默认GET 45 dataType: "json", //预期服务器返回的数据类型 46 global: true, //是否触发全局Ajax事件，默认为true（触发） 47 data: { "id": id }, //向服务器发送的数据 48 beforeSend: function (XMLHttpRequest) { 49 //alert("正在加载中"); 50 $("#div1").show(); 51 52 }, ///发送请求前调用，可以放一些"正在加载"之类额话 53 complete: function (XMLHttpRequest, textStatus) { 54 55 }, //请求完成时（成功或失败） 56 success: function (data, textStatus) //请求成功后的回调函数 57 { 58 $("#div1").hide(); 59 $.each(data, function (i, item) //i： data中对象成员或数组的索引值 60 //item： data对应的变量或内容 61 { 62 alert(item.Name); 63 64 }); 65 66 }, 67 error: function (XMLHttpRequest, txtStatus, ErroeThrown) { } //失败后回调 68 }); 69 70
71 72 //fn指回调函数(callback) 73 ajaxStart(fn) 74 ajaxStop(fn) 75 ajaxComplete(fn) 76 ajaxError(fn) 77 ajaxSend(fn) 78 ajaxSuccess(fn) 79 //如果想某个Ajax请求不受全局方式影响 80 $.ajax({ 81 global: false 82 }) 83 84 85 })}) 86 </script> 87 88 <style type="text/css"> 89 .login{width:200px;border:0px solid #ccc;display:none;position:absolute;top:200px;left:500px;z-index:200} 90 </style> 91 </head> 92 <body> 93 <form id="form1" runat="server"> 94 <div id="div1" class="login"> 95 <img src="1.gif" /> 96 </div> 97 <input type="text" id="stuID" /><br /> 98 <input type="button" value="点击按钮" id="btn" /> 99 </form> 100 </body> 101 </html>