JQuery Ajax小磨合-1

同一、实现目标

昨想以网站后台改进个稍作用,为了简化user操作步骤,在user输入文件名称后活动进行管刷新验证。功能简单,可是也赶上了奇怪的辛苦,且听自己渐渐道来。完成后底效能预览如下:

图片 1

 

第二、知识复习

先是带大家复习一下JQuery
Ajax最常用之中心办法。了解之爱人可以跨了就片。

  1. jQuery.get( url, [data], [callback] )**:**使用GET方式来开展异步请求

 

图片 2图片 3代码

    参数: 
     url (String) :  发送请求的URL地址. 
     data (Map) : (可选) 要发送给服务器的数,以 Key/value 的键值对形式表示,会开呢QueryString附加到要URL中。 
     callback (Function) : (可选) 载入成功时回调函数(只有当Response的回到状态是success才是调动用该方法)。

 

  1. jQuery.post( url, [data], [callback], [type] ) **:**使用POST方式来进展异步请求

   

图片 4图片 5代码

参数: 
    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). 图片 6

查阅了来资料,原因该着重是回传的提示文字被有特殊字符“*”导致的。因为只能分包0-9,a-z,A-Z的字符才算是合法的。经过调整后终于实现了想只要之成效。

麻烦二:只是继续开展操作时,发现了另外一个题目。即:点击页面内任何一个服务器控件的时候还见面产出一个不当(The state information is
invalid for this page and might be corrupted.)。

 图片 7

说到底找到了一个缓解方案:

先是找到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的研讨还非顶好,仅提供自己之等同点更与豪门大快朵颐,希望大家多交流。

相关文章