標籤：

js前台與後台數據交互

07-15

　　網站是圍繞資料庫來編程的，以資料庫中的數據為中心，通過後台來操作這些數據，然後將數據傳給前台來顯示出來（當然可以將後台代碼嵌入到前台）。即：

　　

　　下面就講前台與後台進行數據交互的方法，分前台調用後台方法與變數；台調用前台js代碼。本文先介紹前者，後者在後面文章中介紹。

前台調用後台方法與變數：方法一：通過WebService來實現步驟：

後台

首先引入命名空間（using System.Web.Services;）

然後定義公共的靜態的方法（必須為public和static的,且靜態方法不能訪問外部的非靜態變數，此時後台與前台相當於父類與子類的關係），並在該方法頭部上加上[System.Web.Services.WebMethod]，來標註方法特性。

前台

添加ScriptManager伺服器控制項，並把其EnablePageMethods屬性設為true。

通過PageMethods方法調用後台定義的public、static方法

PageMethods方法簡介：

PageMethods.FunctionName(Paramter1,Parameter2,...,funRight,funError, userContext);

1) Paramter1,Parameter2,...,表示的是FunctionName的參數,類型是Object或Array；

2) funRight是方法調用成功後的回調函數，對返回值進行處理

3) funError是當後台的FunctionName方法發生異常情況下的執行的Js方法（容錯處理方法），

4) userContext是可以傳遞給SuccessMethod方法，或是FailedMethod方法的任意內容。

舉例：

後台代碼：

　　

[html] view plain copy

  1. usingSystem;
  2. usingSystem.Collections.Generic;
  3. usingSystem.Linq;
  4. usingSystem.Web;
  5. usingSystem.Web.UI;
  6. usingSystem.Web.UI.WebControls;
  7. usingSystem.Web.Services;
  8. namespaceWebApplication4
  9. {
  10. publicpartialclassWebForm10:System.Web.UI.Page
  11. {
  12. protectedvoidPage_Load(objectsender,EventArgse)
  13. {
  15. }
  16. [WebMethod]
  17. publicstaticstringtest1(stringuserName)
  18. {
  19. return"hello"+userName+",這是通過WebService實現前台調用後台方法";
  20. }
  21. }
  22. }

前台代碼：

　　

[html] view plain copy

  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="WebForm10.aspx.cs"Inherits="WebApplication4.WebForm10"%>
  2. <!DOCTYPEhtml>
  3. <htmlxmlns="http://www.w3.org/1999/xhtml">
  4. <headrunat="server">
  5. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  6. <title></title>
  7. </head>
  8. <body>
  9. <formid="form1"runat="server">
  10. <%--引入ScriptManager伺服器控制項--%>
  11. <asp:ScriptManagerID="ScriptManager1"runat="server"EnablePageMethods="true"></asp:ScriptManager>
  12. <scripttype="text/javascript">
  13. functionbclick(){
  14. PageMethods.test1("zhipeng",funRight);
  15. }
  17. functionfunRight(val)//回調函數，用val接受後台代碼test1的執行結果
  18. {
  19. alert(val);
  20. }
  21. </script>
  22. <inputid="Button1"type="button"value="方法測試"onclick="bclick()"/>//點擊按鈕會彈出對話框「通過WebService實現前台調用後台方法」
  23. </form>
  24. </body>
  25. </html>

點擊按鈕彈出如下對話框：

　　

方法二：通過<%=methodname()%>和<%#methodname()%>（methodname()為後台定義的方法）

這種方法調用的後台方法可能出現在前台的位置有3種情況：

1)伺服器端控制項或HTML控制項的屬性

2)客戶端js代碼中

3)Html顯示內容的位置（它作為佔位符把變數顯示於符號出現的位置）

這裡對兩者做簡單實例，詳細內容在後面文章中介紹

步驟：

後台

定義public或protected的變數或方法（不能為private）

前台

直接用<%= %>和<%# %>對後台變數或方法進行調用，兩者的用法稍有差異（<%# %>基本上能實現<%= %>的所以功能）

舉例：

後台代碼：

　　

[html] view plain copy

  1. usingSystem;
  2. usingSystem.Collections.Generic;
  3. usingSystem.Linq;
  4. usingSystem.Web;
  5. usingSystem.Web.UI;
  6. usingSystem.Web.UI.WebControls;
  8. namespaceWebApplication4
  9. {
  10. publicpartialclassWebForm1:System.Web.UI.Page
  11. {
  12. publicstringname="我是後台變數";
  13. protectedvoidPage_Load(objectsender,EventArgse)
  14. {
  15. this.DataBind();
  17. }
  18. //不能為private
  19. protectedstringstrTest(){
  20. return"這是前台通過<%#%>調用後台方法";
  21. }
  22. publicvoidstrTest2()
  23. {
  24. Response.Write("這是前台通過<%=%>調用後台方法");
  25. }
  27. }
  28. }

前台代碼：

　　

[html] view plain copy

  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs"Inherits="WebApplication4.WebForm1"%>
  3. <!DOCTYPEhtml>
  5. <htmlxmlns="http://www.w3.org/1999/xhtml">
  6. <headrunat="server">
  7. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  8. <title></title>
  10. </head>
  11. <body>
  13. <formid="form1"runat="server">
  14. <div>
  15. <b>伺服器控制項</b><br/><br/>
  16. 伺服器端文本框綁定後台方法：<asp:TextBoxID="TextBox1"runat="server"Text="<%#strTest()%>"></asp:TextBox><%=strTest()%><br/>　
  17. ......................變數：<asp:TextBoxID="TextBox2"runat="server"Text="<%#name%>"></asp:TextBox><br/>　
  18. 伺服器端文本框綁定後台方法：<asp:LabelID="Label1"runat="server"Text="Label"><%=strTest()%></asp:Label><br/>
  19. 伺服器端文本框綁定後台方法：<asp:LabelID="Label2"runat="server"Text="<%#strTest()%>"></asp:Label><br/><br/>
  21. <br/><br/>
  22. <b>客戶端控制項</b><br/><br/>
  23. 客戶端文本框綁定後台方法：<inputid="Text1"type="text"value="<%#strTest()%>"/><%=name%><br/>　
  24. 客戶端標籤:<div><%=strTest()%></div>
  26. </div>
  27. </form>
  28. </body>
  29. </html>

運行結果：

　　

<%=methodname()%>和<%#methodname()%>兩種方式的詳細介紹（聯繫與區別）會在後面文章中詳細介紹。

方法三：通過隱藏服務端按鈕來實現

後台代碼：

　　

[html] view plain copy

  1. usingSystem;
  2. usingSystem.Collections.Generic;
  3. usingSystem.Linq;
  4. usingSystem.Web;
  5. usingSystem.Web.UI;
  6. usingSystem.Web.UI.WebControls;
  8. namespaceWebApplication4
  9. {
  10. publicpartialclassWebForm11:System.Web.UI.Page
  11. {
  12. protectedvoidButton1_Click(objectsender,EventArgse)
  13. {
  14. Response.Write("這是通過隱藏控制項方式實現前台訪問後台方法");
  15. }
  16. }
  17. }

前台代碼：

　　

[html] view plain copy

  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="WebForm11.aspx.cs"Inherits="WebApplication4.WebForm11"%>
  3. <!DOCTYPEhtml>
  5. <htmlxmlns="http://www.w3.org/1999/xhtml">
  6. <headrunat="server">
  7. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  8. <title></title>
  9. <scripttype="text/javascript">
  10. functiontest(){
  11. //通過客戶端腳本選中隱藏控制項，並調用後台相關方法
  12. document.getElementById("Button1").click();
  13. };
  14. </script>
  15. </head>
  17. <body>
  18. <formid="form1"runat="server">
  19. <%--隱藏服務端銨鈕--%>
  20. <asp:ButtonID="Button1"runat="server"Text="Button"style="display:none"/>
  21. <%--調用客戶端腳本，間接調用後台方法--%>
  22. <inputid="Button2"type="button"value="button"onclick="test()"/>
  23. </form>
  24. </body>
  25. </html>

總結：

　　方法一的後台方法必須聲明為public和static（否則會發生PageMethods未定義錯誤）,正是由於要將方法聲明為static,使得這兩種方法都有局限性，即靜態方法中只允許訪問靜態成員變數。所以要想用這兩種方式調用後台方法，後台方法中是不能訪問非靜態成員變數的。

　　方法二，後台方法沒有任何限制，但是前台調用的時候由於<%=%>是只讀的，<%=%>適合於調用後台方法經過處理並返回給客戶端使用，不適合於將數據傳到後台供後台使用

　　後面會講後台調用前台js代碼。。。

推薦閱讀：

※馬雲真正的後台曝光 看看馬雲後台的身家背景有多雄厚
※西遊記中後台最硬的妖怪，孫悟空打不過他，想到此妖孫悟空落淚
※手把手教您尋找最給力的關鍵詞--網銷寶後台
※商家後台淺析
※[Joomla] 著名CMS系統Joomla的後台圖文解說

TAG:數據 | 後台 | 前台 |