码迷,mamicode.com
首页 > Web开发 > 详细

关于JQuery与AJAX验证

时间:2015-07-20 16:08:58      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:

   AJAX验证,其实就是JS代码,他就是先利用Jquery或JS获取一个值,然后偷偷的把值传送到验证界面,然后在偷偷的把验证后的结果给传回来,利用传回来的结果在进行JS判断,从而不会刷新界面。

用图片解释如下图:

技术分享

 

大体过程就是这样,下面用代码来详细的解释一下如何进行用户名的唯一验证。。

  1、 首先,在主页面的Html代码页里,写一个Jquery函数,用来获得要验证的值。(色部分是传过去的值,红色部分是接收回来的值

<script>
    $(document).ready(function () { //对象准备在执行函数
        $("#Text1").blur(function () { //准备是准备焦点离开的时候
            var x = $("#Text1").val();  //获取到文本框的值

            //下面开始利用Ajax传值
            $.ajax({
                url: "yanzheng.aspx", //相当于form表单的action   
                type: "POST",//相当于form表单的method
                data: { uid: x } ,//传过去的参数

                //接收传回来的值
                datatype: "Xml",//返回值的类型
                success: function (data) { //接收成功后执行的函数
                    var ch = $(data).text();
                    if(parseInt(ch)==0)
                    {
                        $("#Label1").html("恭喜你可以使用");
                    }
            else
            {
                        $("#Label1").html("Sorry,You Can‘t");
            }
                }
            });
        })
    })


</script>

其中AJAX函数有5个参数,

传值:

url,往哪个页面传,相当于form表单的action

type,传送方式,相当于form表单的method

data,传过去的值

 

接收返回值:

datatype,返回值的类型

success,接收返回值成功后执行的函数

 

2、在后台界面写验证

public partial class yanzheng : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
         string x=  Request["uid"].ToString(); //接收传过来的值
         
        //开始进行验证
        List<Login> list=  new UserBF().CheckUserI(x);
        int count = list.Count();//得出查出来的集合中的数据数量

        //在传回去,利用xml
        Response.Write("<? xml version=‘1.0‘?>");  //开始
        Response.Write("<count>"+count+"</count>");//传值
        Response.End();//结束

    }
}

最后三句就是用Xml传回去,第一句是开始,都这样写,Version是版本。

             第二句是传回去的值,前面随便自己定义个标签名。

                                    第三句要把Response关闭。

 

传回去之后就可以利用Ajax的datatype来接收,success来写JS判断函数了

 

关于JQuery与AJAX验证

标签:

原文地址:http://www.cnblogs.com/lk-kk/p/4661543.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!