本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里 之前一直用js写ajax现在基于jq实现方便多了~

$.get & $.post 和 $.ajax的区别

之前看过同事写过$.post,而我一直用$.ajax,后来才知道$.get()和$.post()都是通过get和post方式来进行异步,$.ajax()说是jquery最底层的ajax实现的,这里我们使用$.ajax的方式实现.

调用无参方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//调用无参方法
$("#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);
        }
    });
})
1
2
3
4
5
6
[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"就行了.原因可能是两者序列化的方法有所不同.

调用有参方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//调用返回有参方法
$(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);
            }
        });
    });
});
1
2
3
4
5
6
[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);
}

调用返回集合方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//调用返回集合方法
$("#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);
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<string> GetList()
{
    List<string> list = new List<string>
    {
        "a","b","c","d","e","f"
    };
 
    return list;
}

调用返回实体方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("#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);
        }
    });
});
1
2
3
4
5
6
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static Person GetPerson()
{
    return new Person { name = "chenxu" };
}　　
1
2
3
4
public class Person
{
    public string name { get; set; }
}

调用返回DATASET

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//调用返回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);
            }
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[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 一般处理程序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//调用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);
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/// <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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<%@ 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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; }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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;
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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.

Jquery ajax 学习笔记的更多相关文章

  1. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  2. jQuery源代码学习笔记_工具函数_noop/error/now/trim

    jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...

  3. AJAX学习笔记——jQuery中的AJAX

    用jQuery实现Ajax jQuery.ajax([settings]) 1.type:类型, "POST"或"GET" ,默认为"GET" ...

  4. jQuery 基础学习笔记总结（一）

    Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特 ...

  5. jQuery的学习笔记4

    JQuery学习笔记3 2.9属性选择器 属性选择器就是根据元素的属性和属性值作为过滤条件,来匹配对应的DOM元素.属性选择器一般都以中括号作为起止分界符 它的形式如下: ［attribute］ ［a ...

  6. jQuery的学习笔记2

    jQuery学习笔记 Day two Chapter two 选择器 类选择器 语法结构:$(“.classname”) javascript里面没有类选择器所以这个时候使用jQuery会更加的简便 ...

  7. jQuery的学习笔记

    JQuery学习笔记 Chapter one初识jQuery 1.2测试jQuery 在jQuery库中,$是jQuery的别名,如:$()相当于jQuery() 注意:在使用JQuery进行开发的时 ...

  8. Jquery API学习笔记

    学习网站 JQuery API 中文网: http://www.jquery123.com/ 学习一遍API可以更熟练的运用jquery并且拓展思路. 这里只挑选了一些我认为在开发中会用到的一些API ...

  9. Ajax 学习笔记

    什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

随机推荐

  1. 10月27日PHP加载类、设计模式（单例模式和工厂模式）、面向对象的六大原则

    加载类可以使用include.require.require_once三种中的任意一种,每个关键字都有两种方法,但是这种方法的缺点是需要加载多少个php文件,就要写多少个加载类的方法.一般也就需要加载 ...

  2. 10月24日下午PHP封装

    class Ren { private $name; private $sex; private $age;//年龄必须在18-50岁之间 function __construct($n) { $th ...

  3. 裁剪要素出现错误 ：HRESULT:0x80040239

    pFeatureBuffer = pOutFeaCls.CreateFeatureBuffer();                 pFeatureCursor = pOutFeaCls.Inser ...

  4. 面试题目——《CC150》智力题

    面试题6.1:有20瓶药丸,其中19瓶装有1克/粒的药丸,余下一瓶装有1.1克/粒的药丸.给你一台称重精准的天平,怎么找出比较重的那瓶药丸?天平只能用一次. 思路:第1瓶取1颗,第2瓶取2颗....最 ...

  5. .net core 跨平台实践

    本人采用Ubuntu 14.04 来实现.net core 的跨平台实践. 首先安装Ubuntu14.04系统.安装细节问百度. 1..net core console程序的跨平台 首先新建一个con ...

  6. mac系统小记

    1.设置 ls  命令结果的颜色 默认的 ls 是没有颜色的,可以通过设置 CLICOLOR 和 LSCOLORS 两个环境变量来实现.其中,CLICOLOR 是用来设置是否进行颜色的显示(CLI: ...

  7. 入门： 使用JNI 从C++代码中调用Java的静态方法

    开发环境: 操作系统: (uname -a output)  Linux ubuntu 3.8.0-19-generic #29-Ubuntu SMP Wed Apr 17 18:16:28 UTC ...

  8. 与或左移右移操作在ARM寄存器配置中的作用

    逻辑运算: 与运算&:与0清零  清零用与运算 或运算 |:或1置一  置一用或运算 异或 ^:不同为1  /*****单个寄存器清零置一*************************** ...

  9. Spring中集合类型属性注入

    我们都知道如何去注入普通属性的值,非常简单,那么我们如何去注入开发中常见的集合类型的属性了,别急,往下看. 这里将介绍如何给Map list set Array Properties 这些属性注入值. ...

  10. C和指针 第十二章 结构体 整体赋值 error: expected expression

    定义结构体后整体赋值时发生错误 typedef struct NODE { struct NODE *fwd; struct NODE *bwd; int value; } Node; //声明变量 ...