首页 / 脚本样式 / jQuery / MVC+Jquery开发B/S系统 （三） 表单提交

MVC+Jquery开发B/S系统 （三） 表单提交2013-05-22 博客园 麦子|君子兰说起表单提交，是无人不知，无人不晓哇。今天我们就谈如何用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;
}