我们的TFUMS的网页模板基本上都做好了，但是大家都创造了我们的模板里面的表单是不能提交的，这是由于短缺驱动程序，这个驱动程序便是指Javascript代码。

在用户填写完表单项之后，点击了提交按钮，浏览器会将用户填写的内容组织起来发送给指定的做事器地址去处理。
不过现如今的表单提交不再利用浏览器去处理了，而是利用AJAX技能去实现。
AJAX是Asynchronous JavaScript and XML的简称，指的是异步处理JS和XML的技能，而现如今AJAX处理的数据更多是JSON数据了。

JQ的form控件

福哥封装了一个大略的jQuery控件，可以实现对普通表单的表单项目的数据采集并提交给做事器的目的。
这个控件还非常大略，不要焦急，我们一步一步地完善它。

jqajax提交表单PHP前端开辟之用以处置表单的jQuery控件之AJAX要求 Webpack

Javascript

(function($){varmyForm={form:null,opts:null,start:function(){this._checkOpts(this.opts);this._bindEvent(this.form);},_checkOpts:function(opts){if(opts.url==null){throw("Thereisnotavalidactionforform");}},_bindEvent:function($form){varex=this;$form.removeAttr('onsubmit');$form.bind('submit',function(e){returnex._doSubmitEvent(e);});},_doSubmitEvent:function(obj){varex=this;form=obj.target;$form=$(form);opts=this.objs;//this._doAjax({method:$form.attr('method'),data:$form.serialize(),dataType:'json',success:function(d){ex._doAjaxSuccess(d,ex.opts);},error:function(d){ex._doAjaxError(d,ex.opts);}},this.opts);returnfalse;},_doAjax:function(opts,defOpts){opts.url=defOpts.url;if(opts.method==null){opts.method="get";}$.ajax(opts);},_doAjaxSuccess:function(d,opts){if(opts.onSuccess){opts.onSuccess(d);}},_doAjaxError:function(d,opts){if(opts.onError){opts.onError(d);}},init:function(form,opts){this.form=$(form);this.opts=opts;}};myForm.init.prototype=myForm;$.fn.form=function(options){varmy=newmyForm.init(this,options);my.start();};})(jQuery);用户登录页面

我们在用户登录页面调用这个控件驱动登录表单，使登录表单可以实现提交。

Javascript

$(function(){$('form').form({url:'user/login',onSuccess:function(d){console.log('success',d);},onError:function(d){console.log('error',d);}});});

可以看到输入用户名和密码之后点击登录按钮，右边的调试工具里就会有一个做事器要求记录了。
点击做事器要求记录，在Form Data里面可以看到我们在表单里面填写的内容，便是说我们填写的内容已经通过AJAX发送到做事器上去了。

总结

本日福哥给大家展示了一个根本的JQ控件form，这个控件可以实现将表单里的表单项目的数据网络起来发送给我们指定的做事器地址上了。
不过，童鞋们也会创造一个问题，如果用户输入的用户名和密码不对怎么办？我们怎么提示给用户呢？下一课我们将揭晓这个问题的答案。

下一课福哥将连续完善这个JQ控件form，实现最大略的表单验证功能。

https://m.tongfu.net/home/35/blog/512913.html