利用JQuery直接調(diào)用asp.net后臺的簡單方法

更新時間：2016年10月27日 09:35:55 投稿：jingxian

下面小編就為大家?guī)硪黄肑Query直接調(diào)用asp.net后臺的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

利用JQuery的$.ajax()可以很方便的調(diào)用asp.net的后臺方法。

[WebMethod] 命名空間

1、無參數(shù)的方法調(diào)用, 注意：1.方法一定要靜態(tài)方法，而且要有[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)
 {  
        //返回的數(shù)據(jù)用data.d獲取內(nèi)容 
        alert(data.d); 
      }, 
      error:
function(err)
 {  
        alert(err); 
      } 
    }); 
 
    //禁用按鈕的提交 
    return false; 
  }); 
});

2、帶參數(shù)的方法調(diào)用

后臺<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)
 {  
        //返回的數(shù)據(jù)用data.d獲取內(nèi)容 
         alert(data.d); 
      }, 
      error:
function(err)
 {  
        alert(err); 
      } 
    }); 
 
    //禁用按鈕的提交 
    return false; 
  }); 
});

3、返回數(shù)組方法的調(diào)用

后臺<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(""); 
 
        //遞歸獲取數(shù)據(jù) 
        $(data.d).each(function()
 {  
          //插入結(jié)果到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("");
 
        //遞歸獲取數(shù)據(jù)
        $(data.d).each(function()
 {
          //插入結(jié)果到li里面
          $("#list").append("<li>" +
this +
"</li>");
        });
 
        alert(data.d);
      },
      error:
function(err)
 {
        alert(err);
      }
    });
 
    //禁用按鈕的提交
    return false;
  });
});

4、返回Hashtable方法的調(diào)用

后臺<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) { //如果沒有上面的捕獲出錯會執(zhí)行這里的回調(diào)函數(shù) 
        alert(status); 
      } 
    }); 
 
    //禁用按鈕的提交 
    return false; 
  }); 
});

以上就是小編為大家?guī)淼睦肑Query直接調(diào)用asp.net后臺的簡單方法全部內(nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: