JQuery Ajax小磨合-1

壹 、完成指标

明日想在网站后台创新个小功效,为了简化user操作步骤,在user输入文件名称后活动举行无刷新验证。成效简单,然而却碰着了意料之外的难为,且听作者稳步道来。完毕后的功用预览如下:

Ajax 1

 

二 、知识复习

首先带大家复习一下JQuery
Ajax最常用的宗旨办法。了然的对象能够跳过那有的。

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

 

Ajax 2Ajax 3代码

    参数: 
     url (String) :  发送请求的ULacrosseL地址. 
     data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对情势表示,会做为QueryString附加到请求U奇骏L中。 
     callback (Function) : (可选) 载入成功时回调函数(唯有当Response的归来状态是success才是调用该方法)。

 

  1. jQuery.post( url, [data], [callback], [type] ) **:**使用POST格局来实行异步请求

   

Ajax 4Ajax 5代码

参数: 
    url (String) : 发送请求的USportageL地址. 
    data (Map) : (可选) 要发送给服务器的数额,以 Key/value 的键值对情势表示。 
Ajax,    callback (Function) : (可选) 载入成功时回调函数(只有当Response的回到状态是success才是调用该办法)。
    type (String) : (可选)官方的求证是:Type of data to be sent。其实应该为客户端请求的系列(JSON,XML,等等)

 

**三、牛刀小试**

页面设计:首要控件是3个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() == “”)
                {
                    Message博克斯.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). Ajax 6

查了些资料,原因应该重若是回传的升迁文字中留存特殊字符“*”导致的。因为只好分包0-9,a-z,A-Z的字符才算是合法的。经过调整今后终于达成了想要的成效。

麻烦二:只是继续开始展览操作时,发现了此外1个题材。即:点击页面内任何3个服务器控件的时候都会产出3个谬误(The state information is
invalid for this page and might be corrupted.)。

 Ajax 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的钻研还不太深,仅提供本身的一点经历和豪门大快朵颐,希望我们多多调换。

相关文章