自從有了JQuery,Ajax的使用變的越來越方便了,但是使用中還是會(huì)或多或少的出現(xiàn)一些讓人短時(shí)間內(nèi)痛苦的問題。本文暫時(shí)總結(jié)一些在使用JQuery Ajax中應(yīng)該注意的問題,如有不恰當(dāng)或者不完善的地方,歡迎大家指正和補(bǔ)充。
本文將從Ajax請(qǐng)求aspx、ashx和asmx三種方式討論。
首先看看請(qǐng)求aspx的情況
Aspx頁面的Ajax請(qǐng)求可以有兩種方式:
1、 通過使用get或者post方法,傳遞頁面地址為url參數(shù)的值,并附帶一些標(biāo)記參數(shù),直接請(qǐng)求。這種方式的Ajax被一些人譽(yù)為“假的Ajax”,表面上沒有刷新頁面,其實(shí)后臺(tái)的執(zhí)行情況和刷新 頁面的效果是一樣的。
其實(shí)這種情況也可以請(qǐng)求頁面中的特定的方法,只要使用附帶的參數(shù)去判斷,就可以“請(qǐng)求”特定的方法了。
下面展示了使用兩種不同的方法請(qǐng)求兩個(gè)不同頁面的情況,只是摘抄了代碼,具體的詳細(xì)代碼可以在文章結(jié)尾下載。
前臺(tái):
// 直接請(qǐng)求頁面的方式 $(function () { /* $.get( "RequestPage.aspx", { "token": "ajax" }, function (data) { $("#dataShow").text(data); } );*/ $.ajax({ type:"Post", url: "ResponsePage.aspx", // data: "{'token':'ajax'}",// 使用這種方式竟然無法傳遞參數(shù),各位有知道原因的告訴一下啊。 data:"token=ajax", success: function (data) { $("#dataShow").text(data); } }); })
后臺(tái):
protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { if ((Request["token"]??"")=="ajax") { // 下面這些內(nèi)從可以放在一個(gè)方法里,然后通過“token”標(biāo)記去判斷執(zhí)行哪個(gè)方法。 Response.Write("我是直接請(qǐng)求aspx頁面返回的文字!"); Response.End(); } } }
以上請(qǐng)求返回值都是字符串也就是dataType為text或者h(yuǎn)tml類型。
如果要是希望請(qǐng)求返回的數(shù)據(jù)是xml或者json格式的,該怎么辦呢?
如果要是xml格式的,需要添加一句Response.ContentType=”application/xml”;還有一點(diǎn)要注意的是Write中的內(nèi)容必須是可以解析為xml的字符串才可以,比如“my>123/my>”是可以的,“123”是不可以的,因?yàn)榉祷氐男畔⒅衦esponseXml等于null。如下圖:
前臺(tái):
$.ajax({ type: "Post", url: "ResponsePage.aspx", // data: "{'token':'ajax'}",// 使用這種方式竟然無法傳遞參數(shù),各位有知道原因的告訴一下啊。 data: "token=ajax", // 不需要指定contentType,因?yàn)橹付ê蠓祷氐氖钦麄€(gè)頁面的html,不知道為啥,請(qǐng)求解答啊。 dataType: "xml", success: function (data) { alert(data); }, error: function (d, c,e) { alert(e); } });
后臺(tái):
// 如果要是返回的響應(yīng)為xml,則必須這樣設(shè)置 Response.ContentType = "application/xml"; // 如果要是返回的響應(yīng)為xml,返回的字符串必須是可以被解析的xml文檔格式。 Response.Write("my>123/my>"); Response.End();
如果是為json格式的,后臺(tái)代碼中Response.ContentType=”application/json”這句可有可無,不影響返回的值。但是Response.Write中的值一定要是json格式的,否則會(huì)有Invalid Json格式的錯(cuò)誤。
前臺(tái):
$.ajax({ type: "Post", url: "ResponsePage.aspx", // data: "{'token':'ajax'}",// data必須是一個(gè){key:value}的形式,這是一個(gè)字符串,是不行的。 // data:{token:"ajax"},// 這種方式也可行。 data: "token=ajax", // 不需要指定contentType,因?yàn)閖query會(huì)自動(dòng)添加contentType=“application/x-www-form-urlencode”。 dataType: "json", success: function (data) { alert(data); }, error: function (d, c,e) { alert(e); } });
記錄:如果直接請(qǐng)求一個(gè)頁面,如果data使用"{'token':'ajax'}"這種字符串的形式,jquery是無法轉(zhuǎn)換為token=ajax的形式的。
jquery 文檔中說,可以使用{key:value}形式的data請(qǐng)求頁面,此時(shí)jquery會(huì)自動(dòng)添加contentType=“application/x-www-form-urlencode”,使傳入的data自動(dòng)轉(zhuǎn)換為key=value的形式。
后臺(tái):
// 如果要是返回的響應(yīng)為xml,則必須這樣設(shè)置 Response.ContentType = "application/json"; // 如果要是返回的響應(yīng)為xml,返回的字符串必須是可以被解析的xml文檔格式。 Response.Write(“[123]"); Response.End();
2、 請(qǐng)求aspx頁面后臺(tái)中的方法。
其實(shí)上面的直接請(qǐng)求頁面的方法中也跟介紹了一種請(qǐng)求頁面內(nèi)方法的解決方案,那就是在前臺(tái)的ajax中傳遞一個(gè)參數(shù)作為標(biāo)記,比如上面的那個(gè)“token”,然后在后臺(tái)的page_load里面判斷token的值,根據(jù)值的不同執(zhí)行不同的方法。下面要介紹的是直接執(zhí)行頁面后臺(tái)中的方法。
(1)使用簡便get或者post方法時(shí),由于不能設(shè)置contentType和dataType所以即使請(qǐng)求的是頁面中的方法,最后請(qǐng)求的還是當(dāng)前頁面,返回的值仍舊是當(dāng)前頁面的html內(nèi)容。所以在請(qǐng)求 方法的時(shí)候,簡便方法還是不合適的。
(2) 使用非簡便方法時(shí),不管是post還是get,如果dataType為xml、text、htm,最后返回的值仍舊是整個(gè)html頁面的內(nèi)容。所以如果要想到的值,還是設(shè)置dataType為“json”吧,不 要忘記還要設(shè)置contentType為“application/json;charset=utf-8”,不設(shè)置這個(gè),json也是返不回來的。而且還必須保證后臺(tái)的被請(qǐng)求的方法是static的,還有[webmethod]標(biāo)記,而且還必須是public的。
前臺(tái):
$.ajax({ type: "post", url: "RequestPage.aspx/RequestedMethod", contentType: "application/json;charset=utf-8", dataType: "json", success: function (res) { alert("success:"+res.d); // 注意這點(diǎn)后面要加個(gè)d才能獲取字符串信息,至于為什么要加個(gè)d,你通過chrome看看返回的響應(yīng)就知道了,O(∩_∩)O }, error: function (xmlReq, err, c) { alert("error:" + err); } });
后臺(tái):
// 需要被Ajax請(qǐng)求的后臺(tái)方法 [WebMethod] [ScriptMethod(UseHttpGet=true)] // 如果要使用POST請(qǐng)求,去掉這個(gè)標(biāo)記 public static string RequestedMethod() { return "[123]"; }
直接使用post是沒有問題的:
如果type改為“get”,則會(huì)出現(xiàn)“500內(nèi)部錯(cuò)誤”。錯(cuò)誤信息為:{"Message":"嘗試使用 GET 請(qǐng)求調(diào)用方法“RequestedMethod”,但不允許這樣做。
解決方法就是在后方法上再加一個(gè)標(biāo)[ScriptMethod(UseHttpGet=true)],ScriptMethod 在System.Web.Script.Services下.這樣之后,就可以在前臺(tái)通過Get方式請(qǐng)求了,但是如果加了這個(gè)標(biāo)記之后,前臺(tái)就不能用POST進(jìn)行請(qǐng)求了。
3、 請(qǐng)求aspx頁面后臺(tái)中的方法,帶參數(shù)
前臺(tái):
$.ajax({ type: "Post", url: "ResponsePage.aspx/RequestMethod1", data:"{'msg':'hello'}", contentType: "application/json;charset=utf-8",// 這句可不要忘了。 dataType: "json", success: function (res) { $("#dataShow").text("success:" + res.d); // 注意有個(gè)d,至于為什么通過chrome看響應(yīng)吧,O(∩_∩)O。 }, error: function (xmlReq, err, c) { $("#dataShow").text("error:" + err); } });
后臺(tái):
[WebMethod] public static string RequestMethod1(string msg) { return msg; }
總體上帶參數(shù)的方式和不帶參數(shù)類似,不同點(diǎn)就是在使用ajax請(qǐng)求的時(shí)候,要傳遞一個(gè)data參數(shù),注意這個(gè)data一定是一個(gè)json格式的字符串,否則就會(huì)報(bào)json錯(cuò)誤的,具體為什么,因?yàn)槟銈鬟f的contentType是application/json啊。
請(qǐng)求asmx(webservice)的情況
請(qǐng)求webservice的時(shí)候,主要是請(qǐng)求webservice中的方法,在請(qǐng)求之前不要忘記了代碼開頭的那段取消注釋的提示“// 若要允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務(wù),請(qǐng)取消對(duì)下行的注釋。
// [System.Web.Script.Services.ScriptService]”
請(qǐng)求webservice中的方法的處理方式和請(qǐng)求aspx頁面后臺(tái)方法的處理方式類似,但也有一些不同。
被請(qǐng)求的webservice中方法的特點(diǎn):
(1) 請(qǐng)求的方法必須是為public的。
(2) 方法必須有[WebMethod]標(biāo)記。
(3) 如果想使用Get的方式請(qǐng)求,還要有[ScriptMethod(UseHttpGet=true)]標(biāo)記。使用Get請(qǐng)求Webservice的方法的時(shí)候,只添加這個(gè)標(biāo)記是不夠的,還要修改Web.Config文件,讓W(xué)ebService支持Get方式請(qǐng)求,否則會(huì)出現(xiàn) “因 URL 意外地以“/GetXmlByGet”結(jié)束,請(qǐng)求格式無法識(shí)別。“的錯(cuò)誤。修改方法為:在System.web配置節(jié)下添加以下紅色的內(nèi)容:
System.web> …………… webServices> protocols> add name="HttpGet"/> add name="HttpPost"/> /protocols> /webServices> /System.web>
(4) 請(qǐng)求xml數(shù)據(jù)類型的時(shí)候,要注意,如果方法返回的是string類型的,返回的xml格式是這樣的:
如果方法返回的是字符串,則會(huì)把返回的字符串包裝在string>標(biāo)簽中返回。
比如以下方法請(qǐng)求后的返回值:
[WebMethod] public string GetXmlByPost() { return "我是通過Post方式請(qǐng)求返回的xml "; }
返回值:
?xml version="1.0" encoding="utf-8"?> string xmlns="http://tempuri.org/">我是通過Post方式請(qǐng)求返回的xml/string>
紅色部分是被請(qǐng)求方法返回的字符串,其他是自動(dòng)添加的,所以在前臺(tái)中通過jquery獲取數(shù)據(jù)的時(shí)候,應(yīng)該$(res).find(”string”).text();如果方法返回的是xmlDocument對(duì)象,則就是方法中構(gòu)造的xml對(duì)象。
比如以下方法請(qǐng)求后的返回值:
// 使用Get方式請(qǐng)求xml,注意返回的字符串一定要是可以解析的xml格式。 [WebMethod] [ScriptMethod(UseHttpGet = true)] public System.Xml. XmlDocument GetXmlByGet() { string xml = "?xml version=\"1.0\" encoding=\"utf-8\"?>my>我是通過Get方式請(qǐng)求返回的xml/my>"; System.Xml.XmlDocument doc = new System.Xml.XmlDocument(); doc.LoadXml(xml); return doc; }
返回的響應(yīng)為:
?xml version=\"1.0\" encoding=\"utf-8\"?>my>我是通過Get方式請(qǐng)求返回的xml/my>
此時(shí)就可以通過$(res).find(”my”).text()的方式取數(shù)據(jù)了。此時(shí)操作的完全是你自己構(gòu)造的xml。
(5) 關(guān)于請(qǐng)求返回JSON需要注意的就是,返回的也是“[d:{}]”格式的數(shù)據(jù),所在前臺(tái)獲取的時(shí)候,一定要加個(gè)”.d”,其他的和xml差不多了。
(6) Text的類型的就不多說了。
請(qǐng)求ashx的情況
請(qǐng)求ashx的時(shí)候和直接請(qǐng)求apsx頁的情況類似,畢竟都是通過response.Write(string)的方式返回?cái)?shù)據(jù)的。
需要注意的地方是:context.Response.ContentType的值,根據(jù)dataType的值區(qū)分:
Text:“text/plain“;
XML:“application/xml“;
JSON:“application/json“.
dataType為xml的時(shí)候,response.Write(string)中的字符串一定要符合xml的格式,為json的時(shí)候,response.Write(string)中的字符串一定要符合json的格式為否則會(huì)出現(xiàn)解析錯(cuò)誤,這個(gè)和aspx頁是一樣的。
如果要使用session的話,在handler的代碼中添加System.Web.SessionState的引用,并讓這個(gè)handler繼承IRequiresSessionState接口,一定要繼承這個(gè)接口,否則會(huì)出錯(cuò)的。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
標(biāo)簽:銅陵 湘西 試駕邀約 焦作 無錫 湖北 綏化 欽州
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《詳解JQuery Ajax 在asp.net中使用總結(jié)》,本文關(guān)鍵詞 詳解,JQuery,Ajax,在,asp.net,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。