Jquery ajax 学习笔记
本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里 之前一直用js写ajax现在基于jq实现方便多了~
$.get & $.post 和 $.ajax的区别
之前看过同事写过$.post,而我一直用$.ajax,后来才知道$.get()和$.post()都是通过get和post方式来进行异步,$.ajax()说是jquery最底层的ajax实现的,这里我们使用$.ajax的方式实现.
调用无参方法
//调用无参方法 $("#Button1").click(function () { $.ajax({ //要用post方式 type: "Post", //方法所在页面和方法名 url: "About.aspx/SayHello", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { //返回的数据用data.d获取内容 alert(data.d); }, error: function (err) { alert("Error: " + err); } }); })
[WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static string SayHello() { return "Hello Ajax!"; }
这里只列出常用的$.ajax的属性以及方法详情请参考这里
有点类似类似调用WebService,后台方法必须为static,访问范围为protect/public,
WebMethod特性是必须的,这样才能被客户端脚本调用,支持远程调用.
ScriptMethod特性是可选的,用于指定调用方法的 HTTP 谓词(GET 或 POST),以及指定输出格式(JSON或XML)没有此特性,方法则默认只能被HTTP POST方式调用,并且输出将序列化为 JSON.
Asp.net 3.5以上可直接使用以上两个命名空间,Asp.net 2.0需安装Asp.net Ajax,或者单独引用Asp.net Ajax的System.Web.Extensions.dll.
如后台方法无参数,data项可填为"{}"或者直接省略.Asp.net 3.5以上使用返回值,需要加上".d",如以上代码里的"data.d",Asp.net 2.0直接使用"data"就行了.原因可能是两者序列化的方法有所不同.
调用有参方法
//调用返回有参方法 $(function () { $("#Button2").click(function () { $.ajax({ type: "Post", url: "About.aspx/Hello", //方法传参的写法一定要对,name为形参的名字,age为第二个形参的名字 data: "{'name':'chenxu','age':'21'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { //返回的数据用data.d获取内容 alert(data.d); }, error: function (err) { alert("Error: " + err); } }); }); });
[WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static string Hello(string name, string age) { return string.Format("hello my name is {0}, {1} years old.", name, age); }
调用返回集合方法
//调用返回集合方法 $("#Button3").click(function () { $.ajax({ type: "Post", url: "About.aspx/GetList", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { //插入前先清空ul $("#list").html(""); //递归获取数据 $(data.d).each(function () { //插入结果到li里面 $("#list").append("<li>" + this + "</li>"); }); alert(data.d); }, error: function (err) { alert("Error: " + err); } }); });
[WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static List<string> GetList() { List<string> list = new List<string> { "a","b","c","d","e","f" }; return list; }
调用返回实体方法
$("#Button4").click(function () { $.ajax({ type: "Post", url: "About.aspx/GetPerson", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { $(data.d).each(function () { alert(this["name"]); }) }, error: function (err) { alert("Error: " + err); } }); });
[WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static Person GetPerson() { return new Person { name = "chenxu" }; }
public class Person { public string name { get; set; } }
调用返回DATASET
//调用返回DATASET方法 $('#Button5').click(function () { $.ajax({ type: "POST", url: "WebService.asmx/GetDataSet", //data: "{}", dataType: 'xml', //返回的类型为XML success: function (result) { //成功时执行的方法 //捕获处理过程中的异常并输出 try { $(result).find("Table1").each(function () { alert($(this).find("Id").text() + " " + $(this).find("Value").text()); }); } catch (e) { alert(e); return; } }, error: function (result, status) { //出错时会执行这里的回调函数 if (status == 'error') { alert(status); } } }); });
[WebMethod] //[ScriptMethod(ResponseFormat = ResponseFormat.Xml)] public static DataSet GetDataSet() { DataSet ds = new DataSet(); DataTable dt = new DataTable(); dt.Columns.Add("ID", Type.GetType("System.String")); dt.Columns.Add("Value", Type.GetType("System.String")); DataRow dr = dt.NewRow(); dr["ID"] = "1"; dr["Value"] = ".NET"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["ID"] = "2"; dr["Value"] = "JAVA"; dt.Rows.Add(dr); ds.Tables.Add(dt); return ds; }
调用dataset总是出问题,之前记得这样写是好用的,找了好长时间没找到问题,哪位大神找到了告诉我.
把web form里面的方法GetDataSet放到web service(asmx)中 并设定 contentType: "text/xml; charset=utf-8",dataType: 'xml'
调用ASHX 一般处理程序
//调用ASHX 一般处理程序 $("#Button6").click(function () { $.ajax({ type: "Post", url: "Hello.ashx", contentType: "application/json; charset=utf-8", dataType: "html", //此处需要写成html success: function (data) { alert(data); }, error: function (err) { alert("Error: " + err); } }); });
/// <summary> /// Hello 的摘要说明 /// </summary> public class Hello : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write("Hello World"); context.Response.End(); } public bool IsReusable { get { return false; } } }
完整code
<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryAjax._Default" %> <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //调用无参方法 $("#Button1").click(function () { $.ajax({ //要用post方式 type: "Post", //方法所在页面和方法名 url: "About.aspx/SayHello", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { //返回的数据用data.d获取内容 alert(data.d); }, error: function (err) { alert("Error: " + err); } }); }) //调用返回有参方法 $(function () { $("#Button2").click(function () { $.ajax({ type: "Post", url: "About.aspx/Hello", //方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字 data: "{'name':'chenxu','age':'21'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { //返回的数据用data.d获取内容 alert(data.d); }, error: function (err) { alert("Error: " + err); } }); }); }); //调用返回集合方法 $("#Button3").click(function () { $.ajax({ type: "Post", url: "About.aspx/GetList", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { //插入前先清空ul $("#list").html(""); //递归获取数据 $(data.d).each(function () { //插入结果到li里面 $("#list").append("<li>" + this + "</li>"); }); alert(data.d); }, error: function (err) { alert("Error: " + err); } }); }); //调用返回实体方法 $("#Button4").click(function () { $.ajax({ type: "Post", url: "About.aspx/GetPerson", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { $(data.d).each(function () { alert(this["name"]); }) }, error: function (err) { alert("Error: " + err); } }); }); //调用返回DATASET方法 $('#Button5').click(function () { $.ajax({ type: "POST", url: "WebService.asmx/GetDataSet", //data: "{}", dataType: 'xml', //返回的类型为XML success: function (result) { //成功时执行的方法 //捕获处理过程中的异常并输出 try { $(result).find("Table1").each(function () { alert($(this).find("Id").text() + " " + $(this).find("Value").text()); }); } catch (e) { alert(e); return; } }, error: function (result, status) { //出错时会执行这里的回调函数 if (status == 'error') { alert(status); } } }); }); //调用ASHX 一般处理程序 $("#Button6").click(function () { $.ajax({ type: "Post", url: "Hello.ashx", contentType: "application/json; charset=utf-8", dataType: "html", //此处需要写成html success: function (data) { alert(data); }, error: function (err) { alert("Error: " + err); } }); }); }) </script> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <h2> ASP.NET Jquery Ajax 调用后台方法示例. </h2> <input id="Button1" type="button" value="调用无参方法" /> <input id="Button2" type="button" value="调用有参方法" /> <input id="Button3" type="button" value="调用返回集合方法" /> <input id="Button4" type="button" value="调用返回实体方法" /> <input id="Button5" type="button" value="调用返回DATASET方法" /> <input id="Button6" type="button" value="调用ASHX" /> <ul id="list"> </ul> </asp:Content>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.Services; using System.Web.Script.Services; using System.Data; namespace JqueryAjax { public partial class About : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static string SayHello() { return "Hello Ajax!"; } [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static string Hello(string name, string age) { return string.Format("hello my name is {0}, {1} years old.", name, age); } [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static List<string> GetList() { List<string> list = new List<string> { "a","b","c","d","e","f" }; return list; } [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static Person GetPerson() { return new Person { name = "chenxu" }; } } public class Person { public string name { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; namespace JqueryAjax { /// <summary> /// Hello 的摘要说明 /// </summary> public class Hello : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write("Hello World"); context.Response.End(); } public bool IsReusable { get { return false; } } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Data; /// <summary> ///WebService 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] //若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。 // [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { public WebService() { } [WebMethod] public DataSet GetDataSet() { DataSet ds = new DataSet(); DataTable dt = new DataTable(); dt.Columns.Add("Id", Type.GetType("System.String")); dt.Columns.Add("Vlues", Type.GetType("System.String")); DataRow dr = dt.NewRow(); dr["Id"] = "小花"; dr["Vlues"] = "aaaaaaaaa"; dt.Rows.Add(dr); dr = dt.NewRow(); dr["Id"] = "小兵"; dr["Vlues"] = "bbbbbbbbb"; dt.Rows.Add(dr); ds.Tables.Add(dt); return ds; } }
总结
一开始对data.d的这个d不是很理解,感谢这篇文章的博主,相比较与aspx ashx只能通过ProcessRequest方法进行输出而不能在内部写static method,如果想在ashx中使用session只要实现IRequiresSessionState接口即可,要不然获取到session会为null.