JQuery Ajax小磨合-1

一、實現目標

昨天想在網站後台改進個小功能，為了簡化user操作步驟，在user輸入檔案名稱後自動進行無重新整理驗證。功能簡單，可是卻遇到了意想不到的麻煩，且聽我慢慢道來。完成後的效果預覽如下：

 

二、知識溫習

首先帶大家溫習一下JQuery Ajax最常用的基本方法。瞭解的朋友可以跳過這部分。

1. jQuery.get( url, [data], [callback] )：使用GET方式來進行非同步請求

 

代碼

    參數： 
     url (String) :  發送請求的URL地址. 
     data (Map) : (可選) 要發送給伺服器的資料，以 Key/value 的索引值對形式表示，會做為QueryString附加到請求URL中。 
     callback (Function) : (可選) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)。

 

2. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式來進行非同步請求

   

代碼

參數： 
    url (String) : 發送請求的URL地址. 
    data (Map) : (可選) 要發送給伺服器的資料，以 Key/value 的索引值對形式表示。 
    callback (Function) : (可選) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)。
    type (String) : (可選)官方的說明是：Type of data to be sent。其實應該為用戶端請求的類型(JSON,XML,等等)

 

三、牛刀小試

頁面設計：主要控制項是一個textBox輸入檔案名稱和label控制項顯示驗證結果。

 

<asp:TextBox runat ="server" ID ="txtName" CssClass ="adminselect06"></asp:TextBox>
<br />
<label id ="tipName" class ="admintext14"></label> 

 

 

後台判斷：

 

添加頁面CheckFileName.aspx，這是Ajax請求的頁面，判斷出結果後返回給首頁面。其,後台功能代碼主要如下

在page_load事件中添加

 

DBConn db = new DBConn();
        string name = ""; 
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //1.首先擷取ajax方法傳入的參數
                if (Request.QueryString["name"] == null || Request.QueryString["name"].ToString().Trim() == "")
                {
                    MessageBox.Show("請輸入視頻名稱");
                    return;
                }
                else
                    name = Request.QueryString["name"].ToString();     
               //2資料庫操作，檢測檔案名稱是否重複，
                FileSame filesame = new FileSame();//自訂的枚舉類型，存放檢測結果
                string sql = ".select ……";
                DataTable dt = db.GetDataSet(sql, "file").Tables[0];
                if (dt.Rows.Count > 0)
                     filesame = FileSame.AllSame;
                else filesame = FileSame.OnlyContent;            
                //3.根據檢測結果返回相應文字
                switch (filesame)
                {
                    case FileSame.NotSame:
                        Response.Write("*不存在相同名稱的檔案");
                        break;
                    case FileSame.Same:
                        Response.Write("*已存在相同名稱的檔案");
                        break;
                              }
            }
    }

 

 

前台用JQuery方法來實現無重新整理驗證：

 

<script src="js/jquery-1.4.2.js" type ="text/javascript" ></script>
 <script language ="javascript" type ="text/javascript">
      $(document).ready(
      function () {
        $("#txtName").blur(function () {
            var name = $("#txtName").val();
            $.get("CheckFileName.aspx? name=" + name, null, function callback(data) { $("#tipName").html(data); });
        })
    })
   </script>

 

四、麻煩出現了：

麻煩一：.程式執行的時候不斷提示如下錯誤(Invalid character in a Base-64 string). 

查了些資料，原因應該主要是回傳的提示文字中存在特殊字元“*”導致的。因為只能包含0-9，a-z,A-Z的字元才算是合法的。經過調整之後終於實現了想要的效果。

麻煩二：可是繼續進行操作時，發現了另外一個問題。即：點擊頁面內任何一個伺服器控制項的時候都會出現一個錯誤(The state information is invalid for this page and might be corrupted.)。

 

最後找到了一個解決方案：

首先找到Ajax請求的檔案中Response部分代碼，即。

 

 switch (filesame)
                {
                    case FileSame.NotSame:
                        Response.Write("*不存在相同名稱的檔案");
                        break;
                    case FileSame.Same:
                        Response.Write("*已存在相同名稱的檔案");
                        break;
                 }

 

 

然後添加Response.End()即可。

 

switch (filesame)
                {
                    case FileSame.NotSame:
                        Response.Write("*不存在相同名稱的檔案");
                        Response.End();
                        break;
                    case FileSame.Same:
                        Response.Write("*已存在相同名稱的檔案");
                        Response.End();
                        break;
                 }

 

 

至此終於搞定了。對於JQuery的研究還不太深，僅提供自己的一點經驗和大家分享，希望大家多多交流。