jQuery技术

jQuery.validationEngine.js学习(5)

字号+ 作者:H5之家 来源:H5之家 2017-01-02 15:02 我要评论( )

ajaxUserCallPhp : { url: ../jsp/login_check.jsp,extraData: name=eric , // if you provide an alertTextOk, it will show as a green prompt when the field validates alertTextOk: * This username is availa

"ajaxUserCallPhp": { "url": "../jsp/login_check.jsp","extraData": "name=eric", // if you provide an "alertTextOk", it will show as a green prompt when the field validates "alertTextOk": "* This username is available", "alertText": "* This user is already taken", "alertTextLoad": "* Validating, please wait" }

这里源码是php,我这里暂时就修改为jsp页面。

String yc = (String)request.getParameter("fieldValue"); String elementId = (String)request.getParameter("fieldId");

注意后台如何获取ajax请求里的值,这里你使用抓包之类的工具就可以清楚看到url上类似拼接有fieldValue=xx&fieldId=xx,所以后台采用如此接住传过来的参数,查询数据库,判断是否有用户名,最后往ajax返回信息时

String json = "{\"0\":\""+elementId+"\",\"1\":\""+da+"\",\"2\":\"yc\"}"; out.println(json);

这里我简单的使用拼接的方式传递了json格式的数据,到时候,大家根据实际情况做修改。

 尝试去找method里的_ajax方法,可以发现这个_ajax方法其实调用了$.ajax的方法提交请求,注意在提交之前,经过了两次for循环,主要是分解extraData,将信息组装成json格式传入data中,最后将data放入请求中根据url发送到后台。关于$.ajax,会有一个success的回调

success: function(json) { errorFieldId = json[0]; errorField = $("#"+ errorFieldId).eq(0); (errorField.length == 1) { var status = json[1]; msg = json[2]; if (!status) { // Houston we got a problem - display an red prompt options.ajaxValidCache[errorFieldId] = false; options.isError = true; (msg) { if (options.allrules[msg]) { var txt = options.allrules[msg].alertText; if (txt) { msg = txt; } } }else msg = rule.alertText; if (options.showPrompts) methods._showPrompt(errorField, msg, "", true, options); } else { options.ajaxValidCache[errorFieldId] = true; (msg) { (options.allrules[msg]) { var txt = options.allrules[msg].alertTextOk; if (txt) { msg = txt; } } } else msg = rule.alertTextOk; if (options.showPrompts) { (msg) methods._showPrompt(errorField, msg, "pass", true, options); else methods._closePrompt(errorField); } (options.eventTrigger == "submit") field.closest("form").submit(); } }

这里回调函数中采用json[0],json[1],json[2]等方式取后台信息,个人觉得并不是很好,这样导致很多时候,后台发来的数据需要根据这个API接口来封装数据,有的时候会有点麻烦。感觉自定义回调比较好一点。这里我说明下这个回调里的几个参数的含义errorFieldId:表示触发ajax验证的控件的id,这个id在放送请求的时候传输到后台,并再次由后台传回前台,这个值需要有。status:举个例子,如果你输入一个用户名,如果这个用户名还没有注册,像前台传输一个status值,要非空,这样告诉前台数据库中没有这个新建的用户名。表示用户名可以注册。那第三个msg:如果你需要在ajax成功返回之后想触发其他method里的方法,可以写allrules里有的方法名即可,你也可以自己输入字符串信息,那最后提示框中将使用你自定义的信息。

以上完成了插件的ajax验证。上面的分析可能不是很全面,如果这个插件有新的功能我还没有用到,希望大家提出来,一起分享分享。

内容不多,时间刚好,以上是我的一点读码体会,如有错误,请指出,大家共通学习。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery学习笔记--jqGrid的属性列表

    jQuery学习笔记--jqGrid的属性列表

    2017-01-02 14:04

  • JavaScript学习总结(四)

    JavaScript学习总结(四)

    2017-01-01 16:02

  • JQuery 学习:切换HTML元素的显示与隐藏

    JQuery 学习:切换HTML元素的显示与隐藏

    2016-12-30 15:01

  •  jQuery学习札记一

    jQuery学习札记一

    2016-12-30 15:00

网友点评
<