您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)jQuery AJAX如何實(shí)現(xiàn)調(diào)用頁面后臺方法的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
具體內(nèi)容如下
1.新建demo.aspx頁面。
2.首先在該頁面的后臺文件demos.aspx.cs中添加引用。
using System.Web.Services;
1).無參數(shù)的方法調(diào)用.
大家注意了,這個版本不能低于.net framework 2.0。2.0已下不支持的。
后臺代碼:
[WebMethod] public static string SayHello() { return "Hello Ajax!"; }
JS代碼:
$(function() { $("#btnOK").click(function() { $.ajax({ //要用post方式 type: "Post", //方法所在頁面和方法名 url: "Demo.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; }); });
頁面代碼:
<form id="form1" runat="server"> <div> <asp:Button ID="btnOK" runat="server" Text="驗(yàn)證用戶" /> </div> </form>
運(yùn)行效果如下:
2).有參數(shù)方法調(diào)用
后臺代碼:
[WebMethod] public static string GetStr(string str, string str2) { return str + str2; }
JS代碼:
$(function() { $("#btnOK").click(function() { $.ajax({ type: "Post", url: "demo.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; }); });
運(yùn)行效果如下:
3).返回?cái)?shù)組方法
后臺代碼:
[WebMethod] public static List<string> GetArray() { List<string> li = new List<string>(); for (int i = 0; i < 10; i++) li.Add(i + ""); return li; }
JS代碼:
$(function() { $("#btnOK").click(function() { $.ajax({ type: "Post", url: "demo.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; }); });
頁面代碼:
<form id="form1" runat="server"> <div> <asp:Button ID="btnOK" runat="server" Text="驗(yàn)證用戶" /> </div> <ul id="list"> </ul> </form>
運(yùn)行結(jié)果圖:
jquery是一個簡潔而快速的JavaScript庫,它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器,并且可對CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件,是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫,能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫,以便快速開發(fā)網(wǎng)站。
感謝各位的閱讀!關(guān)于“jQuery AJAX如何實(shí)現(xiàn)調(diào)用頁面后臺方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。