Ajax请求格式和返回类型汇总
原⽂出处：
常规请求基本格式
1        [WebMethod]
2        public string SayHello(string name)
3        {
4            return "Hello " + name;
5        }
1            $.ajax({
2                url: "/CommonService.asmx/SayHello",
3                type: "Post",
4                dataType: "json",
5                contentType: "application/json; charset=utf-8",
6                data: "{name:'Varchar32'}",
7                success: function (data) {
8                    alert(data.d);
9                },
10                error: function (data) {
11                    //200的响应也有可能被认定为error，responseText中没有Message部分
12                    alert($.sponseText).Message);
13                },
14                complete: function (data) {
15                    ;//after success or error
16                }
17            });
其中⼏个参数的含义
  type：请求⽅式，⼜称Method
  dataType：预期返回类型（The type of data that you're expecting back from the server）
  contentType：发送到服务器的数据的编码类型（When sending data to the server, use this content type）  data：发送到服务器的数据
返回各种类型的数据
1、返回string
1        [WebMethod]
2        public string HelloWorld()
3        {
4            return "Hello World";
5        }
1    //js的其他部分略
2    success: function (data) {
3        $(".ajaxresult div:eq(0)").html("返回数据的类型为：" + typeof(data.d));
4        $(".ajaxresult div:eq(1)").html("内容为：" + data.d);
5    }
浏览器看到的结果
另附上采⽤text格式调⽤的代码
1            $.ajax({
2                url: "/CommonService.asmx/HelloWorld",
3                type: "Post",
4                dataType: "text",
5                data: {},
6                success: function (data) {
7                    $(".ajaxresult div:eq(0)").html("返回数据的类型为：" + typeof (data));
8                    $(".ajaxresult div:eq(1)").html("内容为：" + data);
9                }
10            });
2、返回int
1        [WebMethod]
2        public int HelloWorld()
3        {
4            return 1;
5        }
js部分略
浏览器看到的结果
3、返回数组（List或Array）
1        [WebMethod]
2        public List<string> HelloWorld()
3        {
4            return new List<string>() { "Frozen_Zhang","Varchar32"};
5        }
1            //js的其他部分略
2            success: function (data) {
3                    $(".ajaxresult div:eq(0)").html("返回数据的类型为：" + typeof (data.d));
4                    var str = "";
5                    $.each(data.d, function (index, val) {
6                        str += "第" + index + "项：" + val + " ;";
7                    });
8                    str = str.substring(0,str.length - 1);
9                    $(".ajaxresult div:eq(1)").html("内容为：" + str);
10                }
浏览器看到的结果
4、返回⾃定义类
1    public class Person
2    {
3        public string Name { get; set; }
4        public bool Gender { get; set; }
5    }
1        [WebMethod]
2        public Person HelloWorld()
3        {
4            return new Person() {
5                Name = "Varchar32",
6                Gender = true
7            };
8        }
1                //js的其他部分略
2                success: function (data) {
3                    $(".ajaxresult div:eq(0)").html("返回数据的类型为：" + typeof (data.d));
4                    $(".ajaxresult div:eq(1)").html("内容为：姓名" +  data.d.Name + "，性别" + (data.d.Gender ? "男" : "⼥"));
5                }
浏览器看到的结果
5、返回⾃定义类的集合
1        [WebMethod]
2        public List<Person> HelloWorld()
3        {
4            return new List<Person>(){
5                new Person() {
6                    Name = "Varchar32",
7                    Gender = true
8                },
9                new Person(){
10                    Name = "Frozen_Zhang",
11                    Gender = true
12                }
13            };
14        }
1          //js的其他部分略
2                success: function (data) {
3                    $(".ajaxresult div:eq(0)").html("返回数据的类型为：" + typeof (data.d));
4                    var str = "";
5                    $.each(data.d, function (index, val) {
6                        str += "第" + index + "项：" + "姓名" + val.Name + "，性别" + (val.Gender ? "男" : "⼥") + " ;";
7                    });
8                    str = str.substring(0, str.length - 1);
9                    $(".ajaxresult div:eq(1)").html("内容为：" + str);
10                }
浏览器看到的结果
6、返回Dictionary
1        [WebMethod]
2        public Dictionary<string,string> HelloWorld()
3        {
4            //键必须是string类型
5            var dict = new Dictionary<string, string>();
6            dict.Add("1","Varchar32");
7            dict.Add("2", "Frozen_Zhang");
8            return dict;
9        }
1                //js的其他部分略
2                success: function (data) {
3                    $(".ajaxresult div:eq(0)").html("返回数据的类型为：" + typeof (data.d));
4                    var str = "";
5                    $.each(data.d, function (key, val) {
6                        str += "键:" + key + "，值:" + val + " ;";
7                    });
8                    str = str.substring(0, str.length - 1);
9                    $(".ajaxresult div:eq(1)").html("内容为：" + str);
10                }
浏览器看到的结果
7、返回DataSet
1        [WebMethod]
2        public DataSet HelloWorld()write的返回值
3        {
4            var ds = new DataSet();
5            var dt = new DataTable();
6            dt.Columns.Add("Name");
7            dt.Columns.Add("Gender");
8            dt.Rows.Add("Varchar32", true);
9            dt.Rows.Add("Frozen_Zhang", true);
10            ds.Tables.Add(dt);
11            return ds;
12        }
1            //此处采⽤xml格式调⽤
        　$.ajax({
2                url: "/CommonService.asmx/HelloWorld",
3                type: "Post",
4                dataType: "xml",
7                data: {},
9                success: function (data) {
10                    var str = "";
11                    $.each($.find("Table1", data), function () {
12                        str += $(this).find("Name").text() + (Boolean($(this).find("Gender").text()) ? "男" : "⼥") + ";";
13                    });
14
15                    str = str.substring(0, str.length - 1);
16                    $(".ajaxresult div:eq(1)").html("内容为：" + str);
17                }
18            });
浏览器看到的结果
*、⽤xml格式调⽤⽐较简单，⽤json格式要引⽤Microsoft.Web.Preview.dll库，还要在fig中添加⼀⼤串，⽐较⿇烦
跨域请求
1、原理
  javascript的同源策略（Same-Origin Policy）：js不能访问不在同⼀域下的页⾯内容，因此XmlHttpRequest只能请求在同⼀源下的资源　但script标签的src属性不受同源策略的影响
1    <script type="text/javascript" id="script1">
2        funccallback = function (data) {
3            alert(data);
4        }
5    </script>
6    <script type="text/javascript" id="script2">
7        funccallback("Varchar32");
8    </script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。