js前臺與後臺數據交互-前臺調後臺

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

　　

vcD4KPHA+PC9wPgo8cD6hoaGhz8LD5r7NvbLHsMyo0+u688yovfjQ0Mr9vt29u7ultcS3vbeoo6y31sewzKi199PDuvPMqLe9t6jT67Hkwb+ju8yotffTw8ewzKhqc7T6wuuho7G+zsTPyL3pydzHsNXfo6y689Xf1Nq688PmzsTVwtbQvenJ3KGjPC9wPgo8cD48YnI+CjwvcD4KPGgxPsewzKi199PDuvPMqLe9t6jT67Hkwb+jujwvaDE+Cjxicj4KCjxoMj63vbeo0rujus2ouf1XZWJTZXJ2aWNlwLTKtc/WPC9oMj4KPGgzPjxzdHJvbmc+sr3W6KO6PC9zdHJvbmc+PC9oMz4KPHA+uvPMqDwvcD4KPHA+PyAgytfPyNL9yOvD/MP7v9W85KOodXNpbmcgU3lzdGVtLldlYi5TZXJ2aWNlczujqTwvcD4KPHAgYWxpZ249″left”>? 然後定義公共的靜態的方法（必須為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方法的任意內容。

舉例：

後臺代碼：

　　

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
namespace WebApplication4
{
    public partial class WebForm10 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        [WebMethod]
        public static string test1(string userName)
        {
            return "hello "+userName+", 這是通過WebService實現前臺調用後臺方法";
        }
    }
}

前臺代碼：

　　





    


    
        
        
        <script type="text/javascript">
            function bclick() {
                PageMethods.test1("zhipeng", funRight);
            }

            function funRight(val)       //回調函數，用val接受後臺代碼test1的執行結果  
            {
                alert(val);             
            }
        </script>
        //點擊按鈕會彈出對話框“通過WebService實現前臺調用後臺方法”

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

　　

方法二：通過和（methodname()為後臺定義的方法）

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

1) 服務器端控件或HTML控件的屬性

2) 客戶端js代碼中

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

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

步驟：

後臺

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

前臺

? 直接用和對後臺變量或方法進行調用，兩者的用法稍有差異（基本上能實現的所以功能）

舉例：

後臺代碼：

　　

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication4
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        public string name = "我是後臺變量";
        protected void Page_Load(object sender, EventArgs e)
        {
            this.DataBind();
           
        }
        //不能為private
        protected string strTest() {
            return "這是前臺通過調用後臺方法";
        }
        public void  strTest2()
        {
            Response.Write("這是前臺通過調用後臺方法");
        }

    }
}

前臺代碼：

　　







    




    
    

        服務器控件


        服務器端文本框綁定後臺方法：">
　
        ......................變量：">
　
        服務器端文本框綁定後臺方法：

        服務器端文本框綁定後臺方法：">



        


        客戶端控件


        客戶端文本框綁定後臺方法：<input id="Text1" type="text" value="" />
　        
        客戶端標簽:

運行結果：

　　

和兩種方式的詳細介紹（聯系與區別）會在後面文章中詳細介紹。

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

後臺代碼：

　　

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication4
{
    public partial class WebForm11 : System.Web.UI.Page
    {
        protected void Button1_Click(object sender, EventArgs e)
        {
            Response.Write("這是通過隱藏控件方式實現前臺訪問後臺方法");
        }
    }
}

前臺代碼：

　　







    
    <script type="text/javascript" >
        function test() {
            //通過客戶端腳本選中隱藏控件，並調用後臺相關方法
            document.getElementById("Button1").click();
        };
    </script>

總結：

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

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

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

發佈留言