Jquery 之Ajax方法$.get() 的運用,擴展鏈接模型的天地如前文說道的那個表現(xiàn)層和業(yè)務層的鏈接模型,從上篇博文(http://www.cnblogs.com/AflutterFeather/archive/2010/01/07/1641315.html)中可以看到:我們通過WebService提供的方法來獲取服務端的返回值。 如果不采用WebService,有其他的方法來同服務端代碼進行交互嗎? 經過研究,終于實驗通過,現(xiàn)在就$.get()方法來進行講解。 $.get(url [,data] [,callback] [,type]) -- 方法的完整定義 第一:從服務端獲取字符串 第二:根據(jù)傳入的參數(shù),自動執(zhí)行服務端的不同方法,返回字符串 第三:從服務端獲取Json格式的數(shù)據(jù) 環(huán)境: 靜態(tài)頁面:get1.htm 服務端頁面: get1.aspx 服務端返回Json格式的組件:System.Web.Extensions.dll 1) get1.htm代碼(暫時不含js代碼)
運行頁面》》》
![]() 代碼
<form id="form1" action="#">
<p>評論:</p> <p>姓名:<input id="username" name="username" type="text" /></p> <p>內容:<textarea id="content" name="content" cols="20" rows="2"></textarea></p> <p> <input id="send" type="button" value="提交" /></p> </form> <div>已有評論:</div> <div id="resText" class="highlight"> </div>
2)get1.htm代碼(js代碼)
![]() 代碼
$(function(){
$("#send").click(function(){ $.get("get1.aspx", { username : $("#username").val() , content : $("#content").val() }, function (data, textStatus){ if(textStatus) { $("#resText").html(data); }//if }//function (data, textStatus );//$.get }) })
3)JS代碼說明: $("#username").val() { username : textStatus -- 返回的狀態(tài)值,bool類型的值 4)get1.aspx代碼說明 只有一行代碼 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="get1.aspx.cs" Inherits="get1" %>
5)get1.cs 代碼說明
![]() 代碼
protected void Page_Load(object sender, EventArgs e)
{ string k1 = ""; string k2 = ""; if (Request.QueryString["username"] != null) { k1 = Request.QueryString["username"].ToString(); } if (Request.QueryString["content"] != null) { k2 = Request.QueryString["content"].ToString(); } Response.Write(GetInfo1(k1, k2)); } private string GetInfo1(string username, string content) { return "I>>"+username + ">>" + content; } 總結:當點擊get1.htm的提交按鈕的時候,將值傳入服務端get1.aspx,經過處理后,通過回寫出字符串。
進行擴展思維--------------------》 擴展1 不通過webservice,我們就可以與服務端進行交互,這個時候我們讓其根據(jù)傳入的參數(shù)類型來執(zhí)行不同的方法,這樣我們就可以把很多方法都寫在一個集中的頁面里面(Facade模式),以便于集中管理 $.get("../get1.aspx?type=1", .cs代碼的變化
![]() 代碼
protected void Page_Load(object sender, EventArgs e)
{ string k1 = ""; string k2 = ""; string strType = ""; if (Request.QueryString["username"] != null) { k1 = Request.QueryString["username"].ToString(); } if (Request.QueryString["content"] != null) { k2 = Request.QueryString["content"].ToString(); } if (Request.QueryString["type"] != null) { strType = Request.QueryString["type"].ToString(); } if (strType == "1") { Response.Write(GetInfo1(k1, k2)); } else if (strType == "2") { Response.Write(GetInfo2(k1, k2)); } } private string GetInfo1(string username, string content) { return "I>>"+username + ">>" + content; } private string GetInfo2(string username, string content) { return "II>"+username + ">>" + content; }
擴展2 以上都是返回一個字符串,在cs頁面調用Response.write方法進行寫入。這對于單個返回值是沒有問題的,但如果我們要返回一個對象的值?總不能采用這種方法,用分隔符組合在一起,然后又拆開,這樣就太麻煩了,這個時候就要用到Json格式。
![]() 代碼
$.get("../get1.aspx?type=3",
{ username : $("#username").val() , content : $("#content").val() }, function (data, textStatus){ var data1 = ("(" + data + ")"); if(textStatus){ var username = data1.username; var content = data1.content; var txtHtml = "Json>>" + username + "|" + content; $("#resText").html(txtHtml); } else { alert("error"); } }, "JSON");
注意:"JSON" 一定要寫成大寫,否則調用沒反映 方法一定要加上,否則也不會顯示出值來(我的理解是:使用這個方法后,data被整理成了對象,在data1.username的時候才會顯示出來),這點我有點不太明白,還需進行試驗才行,不過至少用這種方式可以獲取一個對象的值。
cs代碼關于JSon
![]() 代碼
private string GetInfo_Json(string username, string content)
{ UserInfo objUserInfo = new UserInfo(); objUserInfo.username = username; objUserInfo.content = content; return new JavaScriptSerializer().Serialize(objUserInfo); ; }
注:采用JSON格式的時候,get1.aspx值允許一行代碼,如果有其他的代碼,無法返回值,關于這一點大家可以去嘗試一下,其實很簡單,只需要在get1.aspx里面加入html代碼即可 比如: <html> </html> 總結: 經過以上的敘說,我們可以知道了這種鏈接模型也可以在不使用WebService情況下進行使用,這樣這種模型的天地,我覺得打開了,完全可以做為一種獨立的模型去開發(fā),真正得做到完全與服務器語言獨立,當然我們還面臨很多要解決的困難,在接下來的博文中會陸續(xù)去解決。 |
|
|