MVC+Jquery开发B/S系统:③表单提交
2009-09-14 00:00:00 来源:WEB开发网说起表单提交,是无人不知,无人不晓哇。今天我们就谈如何用JQuery+MVC来处理表单的提交。
想达到的效果:
1、提交前的表单验证
2、表单验证
3、提交后的反馈信息
ok,先说一下工作的原理。
前台<form action='xxx.aspx' method='post'></form>,action指定了接受表单的处理页面。method这里我们只说post
如果用ajax提交表单,自然xxx.aspx便是请求的url。ajax请求后的callback便是响应表单的提交结果(错误、成功),我们提交的反馈信息用一个 浮层(lightbox)来表示。 不至于用 alert(""); 这样铛铛铛很囧。
我们引入一个Jquery的插件http://www.malsup.com/jquery/form/#api 这是一个略有名气的插件,方便易用。
关于其用法,大家可以搜索下。
那么我们需要做的就是
1、jquery.form.js的使用
2、lightbox的实现
3、如何验证
Code
//注册form的ajaxForm 此方法需要调用jquery.ajaxwindow.js的方法
//一般form里有action,所以参数有可能只需要传一个callback,
//如果一个表单有多个提交按钮,那么则需要 提交不同的url
// 这个方法是用来注册form提交,如果有多个提交按钮时,最好默认注册一个,否则验证方法就不起到作用
$.fn.submitForm = function(args) {
var url, id, callback, before;
id = this.attr("id");
if (typeof (args) == "string") {//只传一个url
url = args;
before = undefined;
callback = undefined;
}
else {
args = args || new Object();
url = args.url || this.attr("action");
if (typeof (args) == "function") {//只传一个callback
callback = args;
}
else {
before = args.before;
callback = args.callback;
}
}
//输入验证
this.inputValidate();//这是我们需要实现的一个“输入时的验证”,
this.ajaxForm({ //这里调用jquery.form.js表单注册方法。
url: url,
beforeSubmit: function(a, f, o) {//提交前的处理
//提交验证
if ($("#" + id).submitValidate() == false)//这里我们需要实现的“提交时的验证”。
return false;
if (before != undefined && before() == false) {
return false;
}
o.dataType = "json";//指定返回的数据为json格式。
},
success: function(data) {//提交后反馈信息处理
if (data == "" || data == null) {
return false;
}
var msg = new ajaxMsg(data);//这个ajaxMsg便是我们需要实现的Lightbox
msg.show(callback);//show这个反馈的结果。
return false;
}
});
return this;
}
编缉推荐阅读以下文章
- MVC+JQuery开发B/S系统:②表单绑定
- MVC+Jquery开发B/S系统:①列表绑定
- ››jQuery实现网页精美幻灯片特效的21个实例
- ››jQuery:一次失败的优化尝试
- ››jQuery 如何获取浏览器所在的IP地址
- ››jQuery1.5.2RC1发布
- ››jquery版仿人才招聘网站城市选择弹出效果
- ››开发学院教你用SQL 语句最快速清空MySQL 数据表的...
- ››Jquery 网页右侧快速回复表单,无刷新提交
- ››jQuery点滴细节 保证代码安全
- ››jQuery点滴细节 保证代码安全
- ››jQuery + HttpHandler 实现图片裁剪(适用于论坛, ...
- ››Jquery plugin ----文件上传
- ››JQuery ID选择器中的不能包含特殊字符(=,@ etc....
更多精彩
赞助商链接