Asp.net中JQuery、ajax调用靠山方法总结

Asp.net中JQuery、ajax调用后台方法总结

通过上一篇文章实例的实现，整个过程当中学习到很多知识点，了解了Jquery、Ajax在asp.net中的运用，加以总结，其实原理都是一样的，理解了一种，其他的注意很少的区别就可以了、灵活运用：

 知道的一种就是ajax调后台的方法。

示例代码如下：

前台jQuery代码：

$(function() {  var browers = browersEstimate();  var params = '{browersType:"' + browers + '"}';  $.ajax({      type: "POST",                   //提交方式      url: "Default.aspx/RecordData",   //提交的页面/方法名      data: params,                   //参数（如果没有参数：null）      dataType: "json",                   //类型      contentType: "application/json; charset=utf-8",           success: function(data) {                   //返回的数据用data.d获取内容                     alert(data.d);               },               error: function(err) {                   alert(err);              });        });

这个是jquery下Ajax方法调用后台方法。

这个方法有几点需要说明：

type方式必须是post，再有就是后台的方法必须是静态的，方法声明要加上特性[System.Web.Services.WebMethod()]，传递的参数个数也应该和方法的参数相同。

asp.net后台方法：

  [System.Web.Services.WebMethod()]    public static void RecordData(string browersType)    {        if (BrowserControl.Counters == null)        {            BrowserControl.InitData(0);        }        if (browersType == "")        {            browersType = "Other";        }        BrowserControl.AddOneByBrowserType(browersType);        if (BrowserControl.WriteInDataBase())        {            BrowserControl.OldTotalCount = BrowserControl.Counters.Count;        }        else        {            BrowserControl.OldTotalCount = 0;        }    }

示例代码：

前台jQuery代码

$(function() {         $("#btnOK").click(function() {             $.ajax({                 //要用post方式                 type: "Post",                 //方法所在页面和方法名                 url: "data.aspx/SayHello",                 contentType: "application/json; charset=utf-8",                 dataType: "json",                 success: function(data) {                     //返回的数据用data.d获取内容                     alert(data.d);                 },                 error: function(err) {                     alert(err);                 }             });             //禁用按钮的提交             return false;         });     });

asp.net后台方法

[System.Web.Services.WebMethod()]public static string SayHello()     {     return "Hello Ajax!";     }

3、返回数组方法的调用

示例前台JQuery代码：

$(function() {         $("#btnOK").click(function() {             $.ajax({                 type: "Post",                 url: "data.aspx/GetArray",                 contentType: "application/json; charset=utf-8",                 dataType: "json",                 success: function(data) {                     //插入前先清空ul                     $("#list").html("");                     //递归获取数据                     $(data.d).each(function() {                         //插入结果到li里面                         $("#list").append("" + this + "");                     });                     alert(data.d);                 },                 error: function(err) {                     alert(err);                 }             });             //禁用按钮的提交             return false;         });     });

asp.net 后台代码：asp.net 后台代码：

[System.Web.Services.WebMethod()]   public static List GetArray()     {       List li = new List();     for (int i = 0; i < 10; i++)             li.Add(i + "");     return li;     } 

4、操作xml

xnl文件示例：    <?xml version="1.0" encoding="utf-8" ?>    <data>      <item>        <id>1</id>        <name>qwe</name>      </item>      <item>        <id>2</id>        <name>asd</name>      </item>    </data>     Jquery代码：Jquery代码：

 

Jquery前台代码：

$(function() {         $("#btnOK").click(function() {             $.ajax({                 url: "XMLtest.xml",                 dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了                 success: function(xml) {                     //清空list                     $("#list").html("");                     //查找xml元素                     $(xml).find("data>item").each(function() {                        $("#list").append("id:" + $(this).find("id").text() +"");                        $("#list").append("Name:"+ $(this).find("name").text() + "");                     })                 },                 error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数                     alert(status);                 }             });             //禁用按钮的提交             return false;         });     });

总结

主要是我们要注意js代码里面的方法名要与后台一致，再有就是后台的方法必须是静态的，方法声明要加上特性[System.Web.Services.WebMethod()]，传递的参数个数也应该和方法的参数相同，注意这几部分我们的调试就简单多了，剩下的就是多多实践、加强原理的理解了。