利用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;

  });

});