利用JQuery直接調(diào)用asp.net后臺(tái)的簡(jiǎn)單方法
更新時(shí)間：2016年10月27日 09:35:55 投稿：jingxian
下面小編就為大家?guī)?lái)一篇利用JQuery直接調(diào)用asp.net后臺(tái)的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
利用JQuery的$.ajax()可以很方便的調(diào)用asp.net的后臺(tái)方法。
[WebMethod] 命名空間
1、無(wú)參數(shù)的方法調(diào)用, 注意：1.方法一定要靜態(tài)方法，而且要有[WebMethod]的聲明
后臺(tái)<C#>:
using System.Web.Script.Services;
[WebMethod]
public static string SayHello()
{
return "Hello
Ajax!";
}
前臺(tái)<jQuery>:
$(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;
});
});
2、帶參數(shù)的方法調(diào)用
后臺(tái)<C#>:
using System.Web.Script.Services;
[WebMethod]
public static string GetStr(string str,
string str2)
{
return str
+ str2;
}
前臺(tái)<JQuery>:
$(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;
});
});
3、返回?cái)?shù)組方法的調(diào)用
后臺(tái)<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;
}
前臺(tái)<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)用
后臺(tái)<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;
}
前臺(tái)<JQuery>:
$(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;
});
});
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>
前臺(tái)<JQuery>:
$(function()
{
$("#btnOK").click(function()
{
$.ajax({
url:
"XMLtest.xml",
dataType:
'xml',
//返回的類型為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ī)?lái)的利用JQuery直接調(diào)用asp.net后臺(tái)的簡(jiǎn)單方法全部?jī)?nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
jquery 關(guān)于event.target使用的幾點(diǎn)說(shuō)明介紹
本篇文章介紹了，jquery中關(guān)于event.target使用的幾點(diǎn)說(shuō)明。需要的朋友參考下2013-04-04
取選中的radio的值2010-01-01
這篇文章主要介紹了jQuery 選擇器用法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery選擇器的基本功能、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
jQuery 是我最喜歡的一個(gè)Javascript框架，下文中包含了眾多��以為jQuery愛(ài)好者們使用的插件。如果你還知道其他的好東西，歡迎與大家分享。
2011-08-08 
各瀏覽器中querySelector和querySelectorAll的實(shí)現(xiàn)差異分析
querySelector和querySelectorAll的參數(shù)須是符合 css selector 的字符串。不同的是querySelector返回的是一個(gè)對(duì)象，querySelectorAll返回的一個(gè)集合(NodeList)
2012-05-05 
jQuery模擬12306城市選擇框功能簡(jiǎn)單實(shí)現(xiàn)方法示例
這篇文章主要介紹了jQuery模擬12306城市選擇框功能簡(jiǎn)單實(shí)現(xiàn)方法,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-08-08 
這篇文章主要為大家詳細(xì)介紹了jquery添加div實(shí)現(xiàn)消息聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02 
這篇文章主要介紹了jQuery中attr()方法用法,實(shí)例分析了attr()方法的功能、定義及設(shè)置或返回匹配元素屬性值的使用技巧,需要的朋友可以參考下
2015-01-01 
jquery動(dòng)態(tài)調(diào)整div大小使其寬度始終為瀏覽器寬度
需要設(shè)置寬度為整個(gè)瀏覽器寬度的div，當(dāng)然我們可以使用相對(duì)布局的方式做到這一點(diǎn)，下面是具體實(shí)現(xiàn)，大家可以參考下
2014-06-06