首页 > 代码库 > Jauery 中Ajax的几种异步请求

Jauery 中Ajax的几种异步请求

2024-10-22 01:08:39   226人阅读

   以下介绍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>

 

Jauery 中Ajax的几种异步请求


联系
我们