利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。

利用JQuery直接调用asp.net后台方法

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。

[WebMethod]   命名空间

1、无参数的方法调用, 注意：1.方法一定要静态方法，而且要有[WebMethod]的声明

后台<C#>:

?

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

前台<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 ;        });   });

2、带参数的方法调用

后台<C#>:

?

using System.Web.Script.Services;   [WebMethod] public static string GetStr( string str, string str2) {      return str + str2; }

前台<JQuery>:

?

$( function () {        $( "#btnOK" ).click( function () {            $.ajax({                type: "Post" ,                url: "data.aspx/GetStr" ,                //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字                data: "{'str':'我是','str2':'XXX'}" ,                contentType: "application/json; charset=utf-8" ,                dataType: "json" ,                success: function (data) {                    //返回的数据用data.d获取内容                      alert(data.d);                },                error: function (err) {                    alert(err);                }            });              //禁用按钮的提交            return false ;        });   });

3、返回数组方法的调用

后台<C#>:

?

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

前台<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( "<li>" + this + "</li>" );                    });                      alert(data.d);                },                error: function (err) {                    alert(err);                }            });              //禁用按钮的提交            return false ;        });   }); /// <reference path="jquery-1.4.2-vsdoc.js"/> $( 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( "<li>" + this + "</li>" );                  });                    alert(data.d);              },              error: function (err) {                  alert(err);              }          });            //禁用按钮的提交          return false ;      }); });

4、返回Hashtable方法的调用

后台<C#>:

?

using System.Web.Script.Services; using System.Collections;   [WebMethod] public static Hashtable GetHash( string key, string value) {      Hashtable hs = new Hashtable();        hs.Add( "www" , "yahooooooo" );      hs.Add(key, value);            return hs; }

前台<JQuery>:

?

$( function () {        $( "#btnOK" ).click( function () {            $.ajax({                type: "Post" ,                url: "data.aspx/GetHash" ,                //记得加双引号 T_T                data: "{ 'key': 'haha', 'value': '哈哈！' }" ,                contentType: "application/json; charset=utf-8" ,                dataType: "json" ,                success: function (data) {                    alert( "key: haha ==> " +data.d[ "haha" ]+ "\n key: www ==> " +data.d[ "www" ]);                },                error: function (err) {                    alert(err + "err" );                }            });              //禁用按钮的提交            return false ;        });   });

5、操作xml

?

XMLtest.xml:   view plaincopy to clipboardprint? <? 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 > <? 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>:

?

$( 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( "<li>id:" + $( this ).find( "id" ).text() + "</li>" );                        $( "#list" ).append( "<li>Name:" + $( this ).find( "name" ).text() + "</li>" );                    })                },                error: function (result, status) { //如果没有上面的捕获出错会执行这里的回调函数                    alert(status);                }            });              //禁用按钮的提交            return false ;        });   });

分类: .Net, JS-jQuery