MVC+Jquery开发B/S系统：③表单提交

核心提示：说起表单提交，是无人不知，MVC+Jquery开发B/S系统：③表单提交，无人不晓哇，今天我们就谈如何用JQuery+MVC来处理表单的提交， url: url, beforeSubmit: function(a, f, o) {//提交前的处理 //提交验证 if ($("#" + id).sub

说起表单提交，是无人不知，无人不晓哇。今天我们就谈如何用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系统：①列表绑定