JQuery的四中异步获取后台代码方法
<!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> <title></title> <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#Getjson").click(function () { $.getJSON("ProceseAjaxJson.ashx", "b=3", function (date) { alert(date[0].CityName); }); }); $("#GET").click(function () { $.get("ProceseAjaxJson.ashx", "b=4", function (date) { var j = $.parseJSON(date); alert(j[2].CityName); }); }); $("#Post").click(function () { $.post("ProceseAjaxJson.ashx", { b: 5, date: ‘2014‘ }, function (date) { alert(date[0].CityName); },"json"); }); $("#Ajax").click(function () { $.ajax({ url:"ProceseAjaxJson.ashx", data:"ss=11", type:"get", success:function(date){ alert(date); }, error:function(date){ alert("出错了"); } }); }); }); </script> </head> <body> <input type="button" id="Getjson" value="Ajax获取Json数据" /> <input type="button" id="GET" value="Ajax的Get请求" /> <input type="button" id="Post" value="Ajax的Post请求" /> <input type="button" id="Ajax" value="Ajax的请求" /> <input type="text" id="txtjson" /> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace 一般处理程序操作.AjaxJson { /// <summary> /// ProceseAjaxJson 的摘要说明 /// </summary> public class ProceseAjaxJson : IHttpHandler { public class CityInfo { public int CityId { get; set; } public string CityName { get; set; } } public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; System.Collections.Generic.List<CityInfo> Citys = new List<CityInfo>() { new CityInfo(){CityId=1,CityName="湛江"}, new CityInfo(){CityId=2,CityName="广州"}, new CityInfo(){CityId=3,CityName="茂名"} }; //第一种方式。必须懂 //System.Text.StringBuilder sb = new System.Text.StringBuilder(); //sb.Append("["); //foreach (var city in Citys) //{ // sb.Append("{"); // sb.AppendFormat("\"CityId\":\"{0}\",\"CityName\":\"{1}\"", city.CityId, city.CityName); // sb.Append("},"); //} //string str=sb.ToString().TrimEnd(‘,‘); //str = str + "]"; //第二种方式。方便快捷 System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); string str=javaScriptSerializer.Serialize(Citys); context.Response.Write(str); } public bool IsReusable { get { return false; } } } }
Ajax使用
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#BtnAjax").click(function () { var xhr; if (XMLHttpRequest) { xhr = new XMLHttpRequest(); //ie8,ie9 } else { xhr = new ActiveXObject("XMLHttpRequest?IP=33"); //ie6 } //get请求 // xhr.open("GET", "ProcessAjax.ashx", "True"); // xhr.send(); //post请求 xhr.open("Post", "ProcessAjax.ashx", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("IP=33"); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { alert(xhr.responseText); } } }); }); </script>