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代碼。。。

發佈留言