JQuery Ajax小磨合-1

一、實作目标

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

二、知識溫習

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

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

代碼

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

三、牛刀小試

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

<asp:TextBox runat ="server" ID ="txtName" CssClass ="adminselect06"></asp:TextBox>

<br />

<label id ="tipName" class ="admintext14"></label> 

背景判斷：

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

在page_load事件中添加

<a></a>

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 &gt; 0)

                     filesame = FileSame.AllSame;

                else filesame = FileSame.OnlyContent;            

                //3.根據檢測結果傳回相應文字

                switch (filesame)

                    case FileSame.NotSame:

                        Response.Write("*不存在相同名稱的檔案");

                        break;

                    case FileSame.Same:

                        Response.Write("*已存在相同名稱的檔案");

                              }

            }

    }

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

&lt;script src="js/jquery-1.4.2.js" type ="text/javascript" &gt;&lt;/script&gt;

 &lt;script language ="javascript" type ="text/javascript"&gt;

      $(document).ready(

      function () {

        $("#txtName").blur(function () {

            var name = $("#txtName").val();

            $.get("CheckFileName.aspx? name=" + name, null, function callback(data) { $("#tipName").html(data); });

        })

    })

   &lt;/script&gt;

四、麻煩出現了：

麻煩一：.程式執行的時候不斷提示如下錯誤(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)

                 }

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

switch (filesame)

                        Response.End();

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

    本文轉自 陳敬（Cathy） 部落格園部落格，原文連結：http://www.cnblogs.com/janes/archive/2010/12/08/1900459.html，如需轉載請自行聯系原作者