============================================================================
原创作品,允许转载。转载时请务必以超链接形式标明原始出处、以及本声明。
请注明转自:http://yunjianfei.iteye.com/blog/
============================================================================
在HTML页面中,如果想提交表单后不刷新整个页面,通过ajax来提交是比较常用的方法。
Jquery针对ajax也做了一些封装,用起来非常方便。具体可以参照:http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
在提交表单的过程中,还会遇到一些验证操作,用js来做也可以。下面是我写的一个简单例子,可以作为参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="./jquery-2.1.0.min.js"></script> <script type="text/javascript"> function validate_int(field, alerttxt) { with (field) { if (!/^[0-9]*$/.test(value)) {alert(alerttxt);return false} else {return true} } } function validate_required(field, alerttxt) { with (field) { if (value==null || value=="") {alert(alerttxt);return false} else {return true} } } function validate_put(thisform) { with (thisform) { if (validate_required(worker_num,"请输入worker数!") == false) {worker_num.focus();return false} if (validate_int(worker_num,"请输入数字!") == false) {worker_num.focus();return false} var ret = confirm('确认更新该计算资源?'); return ret; } } </script> <script> $.fn.extend({ //用来解析ajax返回的json格式的数据。 get_resp_data: function(data) { var resp = null; try{ resp = $.parseJSON(data) }catch(e){ alert(e); return false; } return resp; }, submit_modify_poolitem: function(pool_id) { $.ajax({ url:'/poolitem', type:'GET', data: $(this).serialize(), success: function(data){ var resp = $(this).get_resp_data(data) if(resp == false) return false; var pi = resp.content; alert("修改成功") //可以在这里加一些后续操作,比如更新table或者页面内容 } }); }, }); $(document).ready(function(){ $("#PUT_1").submit(function(event) { //进行表单验证,用js实现的 var ret = validate_put($(this)[0]); if(ret != true) { return false; } //提交表单 $(this).submit_modify_poolitem(1); event.preventDefault(); return true; }); }); </script> </head> <body> <center> <form id='PUT_1'> <input type='hidden' name='_method' value='put' /> <input type='hidden' name='hostname' value='host1' /> <input type='hidden' name='pool_name' value='test1' /> Worker数量:<input type='text' name='worker_num' size=3/> <input type='submit' value='调整' /> </form> <br> </center> </body> </html>
相关推荐
jquery表单验证Ajax提交.zip
jQ顶部下拉ajax验证表单 jQuery顶部下拉ajax验证表单代码下载.zip
jQuery check_expression表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论...
大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax提交表单,但是没有使用ajax验证. 这种方式也比较简单,在...
其中含有ajax、javascript、jquery以及jquery中表单验证、jquery_ajax的详细介绍
NULL 博文链接:https://hoocy.iteye.com/blog/342678
要实现表单验证和无刷新提交表单我们可以使用jQuery的两个很好用的插件——jquery validate.js 和 jquery form.js.具体详细说明情况下文。 1、jQuery validate.js,它说白了就是一个很高尚的人为我们写好了各种表单...
Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。
我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单的时候处在哪一个阶段:正在提交?提交...
内容索引:脚本资源,jQuery,表单验证,表单判断 Form Of Notifications一款来自国外的 jquery Ajax表单输入检测验证一例,如果输入有错误当即给出提示,表单并不能提交,体升用户体验的好方法,Ajax一定要学习一下哦...
该表单能实现登录时对姓名及密码的验证功能,验证是不会涉及到页面的刷新过程,美观实用!
支持ajax提交表单数据,也支持ajax实时反馈验证结果(如常见的用户注册表单下的用户名检测); 支持开启网速慢时的二次提交防御(有时连续的点击提交表单按钮会产生多次的表单提交结果); 指定表单下任一元素在...
jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...
jQuery Validation表单验证插件实例合集,是锋利的JQuery第七章中的一个典型实例,一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法,一共包含了7个...
jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...
1.baigoValidator.js 验证插件2.baigoValidator.min.js 验证插件压缩版3.baigoValidator.css CSS 样式4.status_x.png 验证失败时的图标5.status_y.png 验证成功时的图标6.loading.gif 正在验证图标7.readme.txt 使用...
本人自己开发的jquery表单验证控件! 使用方便,样式美观,完全开源。好不好用了就知道了! 插件名称:jquery表单验证插件 V1.0 插件作者:zy8008 最后更新:2011-4-28 插件说明: datatype类型说明: -----------...
该插件通过与以下jQuery插件集成来支持AJAX表单提交,表单验证以及浏览器的后退和前进按钮: jQuery表单 jQuery验证 用法 显然,请确保具有正确的包含-该插件已通过以下版本进行了测试,但也应与较新的版本一起...
jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。...
在页面中将表单放到一个隐藏的容器中,用artdialog弹出该form并对form加上jqueryvalidate验证,提交采用jqueryform ajax提交,由于都是用现成的插件写作代码量很少。 <div id="g_cn" style="display:none;w