Ajax——ajax调用数据总结

   在做人事系统添加批量修改的功能中，需要将前台中的数据传给后台，后台并执行一系列的操作。通过查询和学习了解到可以通过ajax将值传入到后台，并在后台对数据进行操作。

        说的简单点，就是ajax调用后台的方法。通过学习和实践，学习了几种ajax调用数据的几种形式，现在总结一下：

1．  Ajax调用无参的后台方法的数据

Jquery前台代码：

[javascript] view plain copy print ?

1. //ajax调用无参数后台方法 
2. $(function () { 
3.      $("#btnok").click(function () { 
4.          $.ajax({ 
5.              type:"post",        //ajax的方式为post(get方式对传送数据长度有限制) 
6.              url: "demo.aspx/Hello",         //demo.aspx为目标文件，Hello为目标文件中的方法 
7.              contentType: "application/json",        //传值方式 
8.              success: function (data) {      //成功回传值后触发的方法 
9.                  alert(data.d);          //后台返回的参数 
10.              } 
11.          }) 
12.      }) 
13. }); 

       //ajax调用无参数后台方法
        $(function () {
            $("#btnok").click(function () {
                $.ajax({
                    type:"post",        //ajax的方式为post(get方式对传送数据长度有限制)
                    url: "demo.aspx/Hello",         //demo.aspx为目标文件，Hello为目标文件中的方法
                    contentType: "application/json",        //传值方式
                    success: function (data) {      //成功回传值后触发的方法
                        alert(data.d);          //后台返回的参数
                    }
                })
            })
        });

前台表单控件：

[html] view plain copy print ?

1. <input id="btnok" type="button" value="单击返回hello" /> 

        <input id="btnok" type="button" value="单击返回hello" />

后台代码：

[csharp] view plain copy print ?

1. //ajax调用的无参数方法 
2. [WebMethod] 
3. public static string Hello() 
4. { 
5.     return "Hello Ajax!"; 
6. } 

        //ajax调用的无参数方法
        [WebMethod]
        public static string Hello()
        {
            return "Hello Ajax!";
        }

运行结果：

2．  Ajax调用有参后台方法中的数据

Jquery前台代码：

[javascript] view plain copy print ?

1. //ajax调用有参数后台方法 
2. $(function () { 
3.      $("#btnName").click(function () { 
4.          var strname = $("#txtName").val();   //strname获得文本框中输入的值 
5.          $.ajax({ 
6.              type: "post",  //ajax的方式为post(get方式对传送数据长度有限制) 
7.              contentType: "application/json",        //传值方式 
8.              url: "demo.aspx/getName",  //demo.aspx为目标文件，getName为目标文件中的方法 
9.              data: "{strName:'" + strname + "'}",  //strName为后台方法的参数，strname为文本框中输入的值 
10.              contentType: "application/json",        //传值方式 
11.              success: function (result) {      //成功回传值后触发的方法 
12.                  alert(result.d);          //后台返回的参数 
13.              } 
14.          }) 
15.      }) 
16. }); 

       //ajax调用有参数后台方法
        $(function () {
            $("#btnName").click(function () {
                var strname = $("#txtName").val();   //strname获得文本框中输入的值
                $.ajax({
                    type: "post",  //ajax的方式为post(get方式对传送数据长度有限制)
                    contentType: "application/json",        //传值方式
                    url: "demo.aspx/getName",  //demo.aspx为目标文件，getName为目标文件中的方法
                    data: "{strName:'" + strname + "'}",  //strName为后台方法的参数，strname为文本框中输入的值
                    contentType: "application/json",        //传值方式
                    success: function (result) {      //成功回传值后触发的方法
                        alert(result.d);          //后台返回的参数
                    }
                })
            })
        });

前台表单控件：

[html] view plain copy print ?

1. <input id="txtName" type="text" /><input id="btnName" type="button" value="确定" /> 

            <input id="txtName" type="text" /><input id="btnName" type="button" value="确定" />

后台代码：

[csharp] view plain copy print ?

1. //ajax调用的带参数的方法          
2. [WebMethod]        
3. public static string getName(string strName) 
4. { 
5.     return "欢迎"+strName; 
6. } 

        //ajax调用的带参数的方法         
        [WebMethod]       
        public static string getName(string strName)
        {
            return "欢迎"+strName;
        }

运行结果：

3．  Ajax调用后台方法返回数组的数据

Jquery前台代码：

[javascript] view plain copy print ?

1. //ajax调用后台方法返回数组 
2.   $(function () { 
3.       $("#btnReArr").click(function () { 
4.           $.ajax({ 
5.               type: "post",  //ajax的方式为post(get方式对传送数据长度有限制) 
6.               contentType: "application/json",        //传值方式 
7.               url: "demo.aspx/GetArray",  //demo.aspx为目标文件，GetArray为目标文件中的方法 
8.               contentType: "application/json",        //传值方式 
9.               success: function (result) {      //成功回传值后触发的方法 
10.                   alert(result.d);          //后台返回的参数 
11.               } 
12.           }) 
13.       }) 
14.   }); 

      //ajax调用后台方法返回数组
        $(function () {
            $("#btnReArr").click(function () {
                $.ajax({
                    type: "post",  //ajax的方式为post(get方式对传送数据长度有限制)
                    contentType: "application/json",        //传值方式
                    url: "demo.aspx/GetArray",  //demo.aspx为目标文件，GetArray为目标文件中的方法
                    contentType: "application/json",        //传值方式
                    success: function (result) {      //成功回传值后触发的方法
                        alert(result.d);          //后台返回的参数
                    }
                })
            })
        });

前台表单控件：

[html] view plain copy print ?

1. <input id="btnReArr" type="button" value="单击返回数组" /> 

            <input id="btnReArr" type="button" value="单击返回数组" />

后台代码：

[csharp] view plain copy print ?

1. //ajax调用返回数组的方法 
2. [WebMethod] 
3. public static List<string> GetArray() 
4. { 
5.      List<string> li = new List<string>(); 
6.      for (int i = 0; i < 10; i++) 
7.          li.Add(i + ""); 
8.      return li; 
9. }     

       //ajax调用返回数组的方法
        [WebMethod]
        public static List<string> GetArray()
        {
            List<string> li = new List<string>();
            for (int i = 0; i < 10; i++)
                li.Add(i + "");
            return li;
        }    

 

运行结果：

4．  Ajax调用xml中的数据

Jquery前台代码：

[javascript] view plain copy print ?

1. //ajax调用xml中的数据 
2.    $(function () { 
3.        $("#btnMaXML").click(function () { 
4.            $.ajax({ 
5.                dataType: 'xml',  //ajax的方式为post(get方式对传送数据长度有限制) 
6.                url: "demoXML.xml",   //直接写xml的名字 
7.                success: function (xml) {      //成功回传值后触发的方法 
8.                    //查找xml元素       
9.                    $(xml).find("data>item").each(function () { 
10.                        var $dm = $(this); 
11.                        var $id = $dm.find("id");   //获取出id字段的值 
12.                        var $class = $dm.find("class");//获取出class字段的值 
13.                        alert($id.text()+","+$class.text());    
14.                    }) 
15.                } 
16.            }) 
17.        }) 
18.    }); 

     //ajax调用xml中的数据
        $(function () {
            $("#btnMaXML").click(function () {
                $.ajax({
                    dataType: 'xml',  //ajax的方式为post(get方式对传送数据长度有限制)
                    url: "demoXML.xml",   //直接写xml的名字
                    success: function (xml) {      //成功回传值后触发的方法
                        //查找xml元素      
                        $(xml).find("data>item").each(function () {
                            var $dm = $(this);
                            var $id = $dm.find("id");   //获取出id字段的值
                            var $class = $dm.find("class");//获取出class字段的值
                            alert($id.text()+","+$class.text());   
                        })
                    }
                })
            })
        });

前台表单控件：

[html] view plain copy print ?

1. <input id="btnMaXML" type="button" value="单击返回xml中数据" /> 

            <input id="btnMaXML" type="button" value="单击返回xml中数据" />

xml代码：

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8" ?>  
2. <data>      
3.   <item>      
4.     <id>1</id>      
5.     <class>语文</class>      
6.   </item>      
7.   <item>      
8.     <id>2</id>      
9.     <class>数学</class>     
10.   </item>      
11. </data>     

<?xml version="1.0" encoding="utf-8" ?> 
<data>     
  <item>     
    <id>1</id>     
    <class>语文</class>     
  </item>     
  <item>     
    <id>2</id>     
    <class>数学</class>    
  </item>     
</data>    

 

运行结果：

       

       对于利用ajax调用后台的方法，也有一定的局限性，因为他的后台方法是静态的，所以在方法中利用表单中的控件就有一定的困难。但是这种从前台传值到后台的方法比较简单也更易于理解。

                        （免费送上自己写的源码地址：http://download.csdn.net/detail/suneqing/7265593）