以下介绍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>
时间： 2024-10-03 21:54:18