jquery UI学习笔记-知问前端之Ajax表单插件和Ajax提交表单
效果图：
第一部分：
学习要点：
1.核心方法
2.option 参数
3.工具方法
传统的表单提交，需要多次跳转页面，极大的消耗资源也缺乏良好的用户体验。而这款form.js 表单的 Ajax 提交插件将解决这个问题。
一．核心方法
官方网站：http://malsup.com/jquery/form/
form.js 插件有两个核心方法：ajaxForm()和 ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进行的功能。
//ajaxForm 提交方式
$('#reg').ajaxForm(function () {
alert('提交成功！');
});
//ajaxSubmit()提交方式
$('#reg').submit(function () {
$(this).ajaxSubmit(function () {
alert('提交成功！');
});
return false;
});二．option 参数
option 参数是一个以键值对传递的对象，可以通过这个对象，设置各种 Ajax 提交的功能。
$('#reg').submit(function () {
$(this).ajaxSubmit({
url : 'test.php', //设置提交的 url，可覆盖 action 属性
target : '#box', //服务器返回的内容存放在#box 里
type : 'POST', //GET,POST
dataType : null, //xml,json,script，默认为 null
clearForm : true, //成功提交后，清空表单
resetForm : true, //成功提交后，重置表单
data : { //增加额外的数据提交
aaa : 'bbb',
ccc : 'ddd'.
},
beforeSubmit : function (formData, jqForm, options) {
alert(formData[0].name); //得到传递表单元素的 name
alert(formData[0].value); //得到传递表单元素的 value
alert(jqForm); //得到 form 的 jquery 对象
alert(options); //得到目前 options 设置的属性
alert('正在提交中！ ！ ！');
return true;
},
success : function (responseText, statusText) {
alert(responseText + statusText); //成功后回调
},
error : function (event, errorText, errorType) { //错误时调用
alert(errorText + errorType);
},
});
return false;
});三．工具方法
form.js 除了提供两个核心方法之外，还提供了一些常用的工具方法。这些方法主要是在提交前或后对数据或表单进行处理的。
//表单序列化
alert($('#reg').formSerialize());
//序列化某一个字段
alert($('#reg #user').fieldSerialize());
//得到某个字段的 value 值
alert($('#reg #user').fieldValue());
//重置表单
$('#reg').resetForm()
//清空某个字段
$('#reg #user').clearFields();
第二部分：
学习要点：
1.创建数据库2.Loading 制作
3.Ajax 提交
运用两大表单插件，完成数据表新增的工作。
一．创建数据库
创建一个数据库，名称为：zhiwen。表为：id、user、pass、email、sex、birthday、date。所需的 PHP 文件：config.php、add.php、is_user.php。
//config.php
//add.php
//is_user.php
在提交表单的时候，用于网络速度问题，可能会出现不同时间延迟。所以，为了更好的用户体验，在提交等待过程中，设置 loading 是非常有必要的。
//采用对话框式
$('#loading').dialog({
modal : true,
autoOpen : false,
closeOnEscape : false, //按下 esc 无效
resizable : false,
draggable : false,
width : 180,
height: 50,
}).parent().parent().find('.ui-widget-header').hide(); //去掉 header 头
//CSS 部分
#loading {
background:url(../img/loading.gif) no-repeat 20px center;
line-height:25px;
font-size:14px;
font-weight:bold;
text-indent:40px;
color:#666;
}最后，我们需要采用 form.js 插件对数据进行提交。而且在其他部分需要做一些修改。
submitHandler : function(form){
$(form).ajaxSubmit({
url : 'add.php',
type : 'post',
beforeSubmit : function(form){
$('#loading').dialog('open');
$('#reg').dialog('widget').find('button').eq(1).button('disable');
},
success : function(responseText,statusText){
$('#reg').dialog('widget').find('button').eq(1).button('enable');
if(responseText){
$('#loading').css('background','url(img/success.gif) no-repeat 15px 10px').html('数据提交成功...');
setTimeout(function(){
$('#loading').dialog('close');
$('#loading').css('background','url(url(img/loading.gif) no-repeat 15px 10px)').html('数据正在交互之中...');
$('#reg').dialog('close');
$('#reg').resetForm();
$('#reg span.star').html('*').removeClass('success');
},1000)
}
}
});
},下面是实施的全部代码：
1、先导入jquery.form.js文件
index.html:
数据正在交互之中...
style.css:
body{
margin:0;
padding:0;
font-size:15px;
font-family:'宋体';
background:#fff;
}
#header{
width:100%;
height:40px;
background:url(../img/header_bg.png);
position:absolute;
top:0px;
}
#header .header_main{
width:800px;
height:40px;
margin:0 auto;
}
#header .header_main h1{
font-size:20px;
margin:0;
padding:0;
color:#666;
height:40px;
line-height:40px;
padding:0 10px;
float:left;
}
#header .header_search{
padding:6px 0;
float:left;
}
#header .header_search .search{
width:300px;
height:24px;
border:1px solid #ccc;
background:#fff;
color:#666;
font-size:14px;
text-indent:5px;
}
#header .header_button {
padding:0 5px;
float:left;
}
#header .header_member{
float:right;
height:40px;
line-height:40px;
color:#555;
font-size:14px;
}
#header .header_member a{
text-decoration:none;
color:#555;
font-size:14px;
}
#reg{
padding:15px 0 0 15px;
}
#reg p {
margin:10px 0;
padding:0;
}
#reg p label {
font-size:14px;
color:#666;
}
#reg p .star{
color:red;
}
#reg p .success {
display:inline-block;
width:28px;
background:url(../img/reg_succ.png) no-repeat;
}
#reg ol{
margin:0;
padding:0 0 0 20px;
color:maroon;
}
#reg ol li {
height:20px;
}
#reg .text{
border-radius:4px;
border:1px solid #ccc;
background":#fff;
height:25px;
width:200px;
text-indent:5px;
color:#666;
}
#loading{
background : url(../img/loading.gif) no-repeat 15px 10px;
line-height : 25px;
font-size:14px;
font-weight:bold;
text-indent:40px;
color:#666;
}
.ui-tooltip {
color:red;
}
.ui-menu-item a.ui-state-focus {
background:url(../img/ui_header_bg.png);
}index.js:
$(function(){
$('#search_button').button({
icons : {
primary : 'ui-icon-search',
},
});
$('#reg_a').click(function(){
$('#reg').dialog('open');
});
$('#loading').dialog({
modal : true,
autoOpen : false,
closeOnEscape : false, //按下 esc 无效
resizable : false,
draggable : false,
width : 210,
height: 50,
}).parent().find('.ui-widget-header').hide();//去掉 header 头
$('#reg').dialog({
autoOpen:false,
modal:true,
resizable:false,
width:320,
height:340,
buttons:{
'提交':function(){
$(this).submit();
}
}
}).buttonset().validate({
submitHandler : function(form){
$(form).ajaxSubmit({
url : 'add.php',
type : 'post',
beforeSubmit : function(form){
$('#loading').dialog('open');
$('#reg').dialog('widget').find('button').eq(1).button('disable');
},
success : function(responseText,statusText){
$('#reg').dialog('widget').find('button').eq(1).button('enable');
if(responseText){
$('#loading').css('background','url(img/success.gif) no-repeat 15px 10px').html('数据提交成功...');
setTimeout(function(){
$('#loading').dialog('close');
$('#loading').css('background','url(img/loading.gif) no-repeat 15px 10px').html('数据正在交互之中...');
$('#reg').dialog('close');
$('#reg').resetForm();
$('#reg span.star').html('*').removeClass('success');
},1000)
}
}
});
},
showErrors : function(errorMap,errorList){
var errors = this.numberOfInvalids();
if(errors > 0){
$('#reg').dialog('option','height',errors * 20 + 340);
}else {
$('#reg').dialog('option','height',340);
}
this.defaultShowErrors();
},
highlight : function(element,errorClass){
$(element).css('border','1px solid #630');
$(element).parent().find('span').html('*').removeClass('success');
},
unhighlight : function(element,errorClass){
$(element).css('border','1px solid #ccc');
$(element).parent().find('span').html(' ').addClass('success');
},
errorLabelContainer : 'ol.reg_error',
wrapper : 'li',
rules : {
user : {
required : true,
minlength : 2,
},
pass : {
required : true,
rangelength : [6,12],
},
email : {
required :true,
email : true,
}
},
messages : {
user : {
required : '帐号不得为空！',
minlength : jQuery.format('帐号不得小于{0}位！'),
},
pass : {
required : '密码不能为空！',
rangelength : $.format('密码的长度在{0}-{1}位之间'),
},
email : {
required : '邮箱不能为空!',
email : '请输入正确的邮箱格式!',
}
}
});
$('#reg input[title]').tooltip({
position : {
my : 'left center',
at : 'right+5 center'/*right加上5个像素*/
},
});
$('#date').datepicker({
dateFormat : 'yy-mm-dd',
dayNames : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesMin : ['日','一','二','三','四','五','六'],
monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
monthNamesShort : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
showButtonPanel : true,
closeText : '关闭',
currentText : '今天',
nextText : '下个月',
prevText : '上个月',
changeMonth : true,
changeYear :true,
yearRange : '1950:2050',
});
var srcArray=['[email protected]', '[email protected]', '[email protected]'];
$('#email').autocomplete({
delay:0,
autoFocus : true,
source:function(request,response){
var hosts=['qq.com','163.com','126.com','gmail.com','hostmail.com'],
term=request.term,//获取输入的内容
name=term,
host='', //域名
ix=name.indexOf('@'),//获取@的位置
result=[]; //结果
//结果第一条是自己输入
result.push(term);
if(ix>-1){
name=term.slice(0,ix);
host=term.slice(ix+1);
}
if(name){
//得到找到的域名
var findedHosts=(host ? $.grep(hosts,function(value,index){
return value.indexOf(host) > -1
}):hosts),
findedResults=$.map(findedHosts,function(value,index){
return name+"@"+value;
});
result=result.concat(findedResults);
}
response(result);
},
});
});$(function(){
$('#search_button').button({
icons : {
primary : 'ui-icon-search',
},
});
$('#reg_a').click(function(){
$('#reg').dialog('open');
});
$('#loading').dialog({
modal : true,
autoOpen : false,
closeOnEscape : false, //按下 esc 无效
resizable : false,
draggable : false,
width : 210,
height: 50,
}).parent().find('.ui-widget-header').hide();//去掉 header 头
$('#reg').dialog({
autoOpen:false,
modal:true,
resizable:false,
width:320,
height:340,
buttons:{
'提交':function(){
$(this).submit();
}
}
}).buttonset().validate({
submitHandler : function(form){
$(form).ajaxSubmit({
url : 'add.php',
type : 'post',
beforeSubmit : function(form){
$('#loading').dialog('open');
$('#reg').dialog('widget').find('button').eq(1).button('disable');
},
success : function(responseText,statusText){
$('#reg').dialog('widget').find('button').eq(1).button('enable');
if(responseText){
$('#loading').css('background','url(img/success.gif) no-repeat 15px 10px').html('数据提交成功...');
setTimeout(function(){
$('#loading').dialog('close');
$('#loading').css('background','url(img/loading.gif) no-repeat 15px 10px').html('数据正在交互之中...');
$('#reg').dialog('close');
$('#reg').resetForm();
$('#reg span.star').html('*').removeClass('success');
},1000)
}
}
});
},
showErrors : function(errorMap,errorList){
var errors = this.numberOfInvalids();
if(errors > 0){
$('#reg').dialog('option','height',errors * 20 + 340);
}else {
$('#reg').dialog('option','height',340);
}
this.defaultShowErrors();
},
highlight : function(element,errorClass){
$(element).css('border','1px solid #630');
$(element).parent().find('span').html('*').removeClass('success');
},
unhighlight : function(element,errorClass){
$(element).css('border','1px solid #ccc');
$(element).parent().find('span').html(' ').addClass('success');
},
errorLabelContainer : 'ol.reg_error',
wrapper : 'li',
rules : {
user : {
required : true,
minlength : 2,
},
pass : {
required : true,
rangelength : [6,12],
},
email : {
required :true,
email : true,
}
},
messages : {
user : {
required : '帐号不得为空！',
minlength : jQuery.format('帐号不得小于{0}位！'),
},
pass : {
required : '密码不能为空！',
rangelength : $.format('密码的长度在{0}-{1}位之间'),
},
email : {
required : '邮箱不能为空!',
email : '请输入正确的邮箱格式!',
}
}
});
$('#reg input[title]').tooltip({
position : {
my : 'left center',
at : 'right+5 center'/*right加上5个像素*/
},
});
$('#date').datepicker({
dateFormat : 'yy-mm-dd',
dayNames : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesMin : ['日','一','二','三','四','五','六'],
monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
monthNamesShort : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
showButtonPanel : true,
closeText : '关闭',
currentText : '今天',
nextText : '下个月',
prevText : '上个月',
changeMonth : true,
changeYear :true,
yearRange : '1950:2050',
});
var srcArray=['[email protected]', '[email protected]', '[email protected]'];
$('#email').autocomplete({
delay:0,
autoFocus : true,
source:function(request,response){
var hosts=['qq.com','163.com','126.com','gmail.com','hostmail.com'],
term=request.term,//获取输入的内容
name=term,
host='', //域名
ix=name.indexOf('@'),//获取@的位置
result=[]; //结果
//结果第一条是自己输入
result.push(term);
if(ix>-1){
name=term.slice(0,ix);
host=term.slice(ix+1);
}
if(name){
//得到找到的域名
var findedHosts=(host ? $.grep(hosts,function(value,index){
return value.indexOf(host) > -1
}):hosts),
findedResults=$.map(findedHosts,function(value,index){
return name+"@"+value;
});
result=result.concat(findedResults);
}
response(result);
},
});
});