关于JQuery与AJAX验证

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判断函数了

时间: 2024-10-31 23:17:51

关于JQuery与AJAX验证的相关文章

jquery validationEngine ajax验证优化

验证input,先验证ajax外的规则(删除data-validation-engine中的ajax规则),验证之后自己写ajax来验证,最后再恢复原来的规则 function validateAjax(input,isValidate){     var $input = $(input), engine = $input.attr("data-validation-engine");     //验证除ajax外的其他规则     if(isValidate) {         

jQuery Validate Ajax 验证

<script type="text/javascript"> $(function() { $('#formCityLink').validate({ rules : { link : "required" }, messages : { link : "请输入链接" }, invalidHandler : function(){ console.log('in invalidehandler'); return false; },

springMVC框架中的ajax验证

当然,你在使用springMVC之前需要进行环境的配置,这里就不讲了,直接上代码. 在使用springMVC之前,我在使用ajax验证的时候,需要用到一个解析json的jar包:将数据通过ajax拿到后台servlet,再通过jsonObject对象进行来像前台进行数据的传递.像下面这样: JSONObject j = new JSONObject(); request.setCharacterEncoding("utf-8"); response.setCharacterEncodi

jquery+ajax验证不通过也提交表单问题处理

这篇文章主要介绍了jquery validationEngine中使用ajax验证不通过也提交表单问题处理,需要的朋友可以参考下 validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax提交表单,但是没有使用ajax验证. 这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例

jquery.validate ajax方式验证

在做网站的时候有一块需要用到jquery.validate插件 ajax方式的方式来验证原始密码是否正确,研究了研究加上博客园朋友的帮助,终于实现了.贴出代码 <script type="text/javascript">    $(function () {        $("#form1").validate({            rules: {                pwd: {                    require

利用jQuery实现的Ajax 验证用户名是否存在

异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项

Struts2+Jquery+实现Ajax无刷新验证用户名是否存在

小弟之前一直搞不明白Struts2+Jquery+实现Ajax无刷新验证用户名该怎么弄,后来经过努力,终于搞定了,应注意struts配置文件的内容,好了直接上代码了 页面代码 <body> <s:form action="registAction" method="post" namespace="/user"> <table> <tr> <td>UserName</td>

【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯.这些特性使JSON成 为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络

触碰jQuery:AJAX异步详解

触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和XHTML来表示. 2)   使用DOM模型来交互和动态显示. 3)   使用XMLHttpRequest来和服务器进行异步通信. 4)   使用javascript来绑定和调用.