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