Jquery是一个优秀的Javascrīpt框架。MVC是一个设计模式,它强制性的使应用程序的输入、处理和输出分开。今天我们就谈如何用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、如何验证
代码:
- $.fn.submitForm = function(args)
- {
- var url, id, callback, before;
- id = this.attr("id");
- if (typeof (args) == "string")
- {
- url = args;
- before = undefined;
- callback = undefined;
- }
- else
- {
- args = args || new Object();
- url = args.url || this.attr("action");
- if (typeof (args) == "function")
- {
- callback = args;
- }
- else
- {
- before = args.before;
- callback = args.callback;
- }
- }
-
- this.inputValidate();
-
- if (url == undefined || url == "")
- {
- $("#" + id).submit(function() {
- if ($("#" + id).submitValidate()==false)
- return false;
-
- callback();
- });
- }
- else
- {
- this.ajaxForm({
- url: url,
- beforeSubmit: function(a, f, o)
- {
-
- if ($("#" + id).submitValidate() == false)
- return false;
- if (before != undefined && before() == false) { s
来源:
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf】
打赏
扫码打赏,您说多少就多少