jquery.Ajax()方法調(diào)用Asp.Net后臺的方法解析
更新時間：2014年02月13日 08:55:08 作者：
本篇文章主要是對jquery.Ajax()方法調(diào)用Asp.Net后臺的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
利用JQuery的$.ajax()可以很方便的調(diào)用asp.net的后臺方法。
先來個簡單的實例熱熱身吧。
1、無參數(shù)的方法調(diào)用
asp.net code：
復制代碼 代碼如下:
using System.Web.Script.Services;
[WebMethod]
public static string SayHello()
{
return "Hello Ajax!";
}
using System.Web.Script.Services;
[WebMethod]
public static string SayHello()
{
return "Hello Ajax!";
}
注意：1.方法一定要靜態(tài)方法，而且要有[WebMethod]的聲明
JQuery code：
復制代碼 代碼如下:
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(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;
});
});
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(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;
});
});
結(jié)果：
2、帶參數(shù)的方法調(diào)用
asp.net code：
復制代碼 代碼如下:
using System.Web.Script.Services;
[WebMethod]
public static string GetStr(string str, string str2)
{
return str + str2;
}
using System.Web.Script.Services;
[WebMethod]
public static string GetStr(string str, string str2)
{
return str + str2;
}
JQuery code：
復制代碼 代碼如下:
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(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;
});
});
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(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;
});
});
運行結(jié)果：
下面進入高級應用羅
3、返回數(shù)組方法的調(diào)用
asp.net code：
復制代碼 代碼如下:
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;
}
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 code：
復制代碼 代碼如下:
/// <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;
});
});
/// <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;
});
});
運行結(jié)果：
4、返回Hashtable方法的調(diào)用
asp.net code：
復制代碼 代碼如下:
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;
}
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 code：
復制代碼 代碼如下:
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(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;
});
});
/// <reference path="jquery-1.4.2-vsdoc.js"/>
$(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;
});
});
運行結(jié)果：
5、操作xml
XMLtest.xml:
復制代碼 代碼如下:
<?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 code:
復制代碼 代碼如下:
$(function() {
$("#btnOK").click(function() {
$.ajax({
url: "XMLtest.xml",
dataType: 'xml', //返回的類型為XML ，和前面的Json，不一樣了
success: function(xml) {
//清空list
$("#list").html("");
//查找xml元素 KVM 網(wǎng)上購物 毛刷 網(wǎng)站建設 北京快遞公司 超聲波焊接機
$(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;
});
});
$(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ān)文章
無論瀏覽器處于什么樣的設置，都要讓這個彈出的窗口最大化，那么怎么辦呢？下面為大家介紹下讓瀏覽器窗口從默認大小變成我們自己的設置2013-09-09
詳談 Jquery Ajax異步處理Json數(shù)據(jù).
啥叫異步,啥叫Ajax.咱不談啥XMLHTTPRequest.通俗講異步就是前臺頁面javascript能調(diào)用后臺方法.這樣就達到了無刷新.2011-09-09
這篇文章主要介紹了jQuery實現(xiàn)HTML表格單元格的合并功能,可合并指定行與指定列上的單元格,涉及jQuery針對表格元素屬性的動態(tài)操作技巧,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了jQuery使用Layer彈出層插件遇到的閃退問題,需要的朋友可以參考下2016-12-12
本文為大家介紹下使用JQuery實現(xiàn)在頁面中添加和除移DOM主要使用了以下幾個方法，感興趣的朋友可以了解下哈，希望對大家有所幫助2013-06-06
這篇文章主要介紹了jquery的push使用方法，可向數(shù)組的末尾添加一個或多個元素，并返回新的長度,需要的朋友可以參考下2014-11-11
密碼框提示文字的功能還是比較實用的，下面為大家介紹下使用jquery簡單的實現(xiàn)下，喜歡的朋友可以參考下2013-08-08
這篇文章主要介紹了jqGrid 學習筆記整理——進階篇(一 )的相關(guān)資料,需要的朋友可以參考下2016-04-04
javascript中用星號表示預錄入內(nèi)容的實現(xiàn)代碼
在一個WEB項目中，有一個比較特殊點的文本框客戶要求實現(xiàn)在那個文本框錄入數(shù)據(jù)前先用星號（*）表示要錄入的信息（那個文本框要錄入的數(shù)據(jù)位數(shù)是已知的2011-01-01
ashx文件與.aspx文件類似，可以通過它來調(diào)用HttpHandler類。下面與大家介紹下jquery訪問ashx文件的過程2014-08-08