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：
復(fù)制代碼 代碼如下:
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：
復(fù)制代碼 代碼如下:
/// <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：
復(fù)制代碼 代碼如下:
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：
復(fù)制代碼 代碼如下:
/// <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é)果：
下面進入高級應(yīng)用羅
3、返回數(shù)組方法的調(diào)用
asp.net code：
復(fù)制代碼 代碼如下:
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：
復(fù)制代碼 代碼如下:
/// <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：
復(fù)制代碼 代碼如下:
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：
復(fù)制代碼 代碼如下:
/// <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:
復(fù)制代碼 代碼如下:
<?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:
復(fù)制代碼 代碼如下:
$(function() {
$("#btnOK").click(function() {
$.ajax({
url: "XMLtest.xml",
dataType: 'xml', //返回的類型為XML ，和前面的Json，不一樣了
success: function(xml) {
//清空list
$("#list").html("");
//查找xml元素 KVM 網(wǎng)上購物 毛刷 網(wǎng)站建設(shè) 北京快遞公司 超聲波焊接機
$(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)文章
基于jquery fly插件實現(xiàn)加入購物車拋物線動畫效果
在購物網(wǎng)站中，加入購物車的功能是必須的功能，有的網(wǎng)站在用戶點擊加入購物車按鈕時，就會出現(xiàn)該商品從點擊出以拋物線的動畫相似加入購物車，這個功能看起來非常炫，對用戶體驗也有一定的提高。下面介紹基于jquery fly插件實現(xiàn)加入購物車拋物線動畫效果2016-04-04
jQuery 獲取和設(shè)置select下拉框的值實現(xiàn)代碼
jQuery獲取和設(shè)置select下拉框值的實現(xiàn)代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了jquery日歷插件datepicker用法,結(jié)合實例形式分析了jquery日歷插件datepicker的定義與使用技巧,需要的朋友可以參考下2016-01-01
下面小編就為大家?guī)硪黄猨Query 局部div刷新和全局刷新方法總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了用jquery實現(xiàn)的一個超級簡單的下拉菜單,需要的朋友可以參考下2014-05-05
JQuery實現(xiàn)列表中復(fù)選框全選反選功能封裝(推薦)
在做列表時經(jīng)常會遇到全選，反選進行批量處理問題。通過本文給大家介紹JQuery實現(xiàn)列表中復(fù)選框全選反選功能封裝，對jq復(fù)選框全選反選功能感興趣的朋友一起看看吧2016-11-11
這篇文章主要介紹了jquery獲取html元素的絕對位置和相對位置的方法,需要的朋友可以參考下2014-06-06
基于jquery實現(xiàn)漂亮的動態(tài)信息提示效果
這個效果是在頁面頭部出現(xiàn)的，出現(xiàn)一下會自動隱藏，上面有x那個提示就要手動關(guān)閉一下，其他的都是自動隱藏的！2011-08-08
JQuery 獲取多個select標簽option的text內(nèi)容(實例)
下面小編就為大家?guī)硪黄狫Query 獲取多個select標簽option的text內(nèi)容(實例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
jQuery 實現(xiàn)DOM元素拖拽交換位置的實例代碼
這篇文章主要介紹了jQuery 實現(xiàn)DOM元素拖拽交換位置，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07