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

