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

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

 

1、有参数的方法调用

 

示例代码如下：

前台jQuery代码：

$(function() { 

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

 

1、有参数的方法调用  

示例代码如下：

 

前台jQuery代码：

[plain]  

<span style="font-size:18px">$(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);       

         });     

     });</span>  

 

 

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

 

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

 

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

 

asp.net后台方法：

[plain] 

<span style="font-size:18px">  [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;  

        }  

    }</span>  

2、无参数的方法调用

  

 

示例代码：

 

前台jQuery代码

[plain] 

<span style="font-size:18px">$(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;       

    });       

});</span>  

 

asp.net后台方法

 

[plain]  

<span style="font-size:18px">[System.Web.Services.WebMethod()]  

public static string SayHello()       

{       

return "Hello Ajax!";       

}</span>  

 

3、返回数组方法的调用

 

示例前台JQuery代码：

 

[plain]  

<span style="font-size:18px">$(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;       

    });       

});</span>  

 

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

 

[plain]  

<span style="font-size:18px">[System.Web.Services.WebMethod()]     

public static List GetArray()       

{       

  List li = new List();       

for (int i = 0; i < 10; i++)       

        li.Add(i + "");       

return li;       

} </span>  

 

4、操作xml

 

[html]  

<span style="font-size:18px">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代码：</span>  

 

Jquery前台代码：

 

[plain] 

<span style="font-size:18px">$(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;       

    });       

});</span>  

 

总结

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