效果图:
第一部分:
学习要点:
1.核心方法
2.option 参数
3.工具方法
传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验。而这款form.js 表单的 Ajax 提交插件将解决这个问题。
一.核心方法
官方网站:http://malsup.com/jquery/form/
form.js 插件有两个核心方法:ajaxForm()和 ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进行的功能。
//ajaxForm 提交方式
$('#reg').ajaxForm(function () {
alert('提交成功!');
});
注意:使用 ajaxForm()方法,会直接实现 ajax 提交。自动阻止了默认行为,而它提交的默认页面是 form 控件的 action 属性的值。提交的方式是 method 属性的值。
//ajaxSubmit()提交方式
$('#reg').submit(function () {
$(this).ajaxSubmit(function () {
alert('提交成功!');
});
return false;
});
注意: ajaxForm()方法,是针对 form 直接提交的, 所以阻止了默认行为。而 ajaxSubmit()方法,由于是针对 submit()方法的,所以需要手动阻止默认行为。而使用了 validate.js 验证插件,那么 ajaxSubmit()比较适合我们。
二.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
<?php
header('Content-Type:text/html; charset=utf-8');
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PWD', '123456');
define('DB_NAME', 'zhiwen');
$conn = @mysql_connect(DB_HOST, DB_USER, DB_PWD) or die('数据库链接失
败:'.mysql_error());
@mysql_select_db(DB_NAME) or die('数据库错误:'.mysql_error());
@mysql_query('SET NAMES UTF8') or die('字符集错误:'.mysql_error());
?>
//add.php
<?php
require 'config.php';
$query = "INSERT INTO user (user, pass, email, sex, birthday, date)
VALUES ('{$_POST['user']}', sha1('{$_POST['pass']}'), '{$_POST['email']}',
'{$_POST['sex']}', '{$_POST['birthday']}', NOW())";
mysql_query($query) or die('新增失败!'.mysql_error());
echo mysql_affected_rows();
mysql_close();
?>
//is_user.php
<?php
require 'config.php';
$query = mysql_query("SELECT user FROM user WHERE user='{$_POST['user']}'")
or die('SQL 错误!');
if (mysql_fetch_array($query, MYSQL_ASSOC)) {
echo 'false';
} else {
echo 'true';
}
mysql_close();
?>
二.Loading 制作
在提交表单的时候,用于网络速度问题,可能会出现不同时间延迟。所以,为了更好的用户体验,在提交等待过程中,设置 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;
}
三.Ajax 提交
最后,我们需要采用 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:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"></link>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<script type="text/javascript">
</script>
</head>
<body>
<div id="header">
<div class="header_main">
<h1>知问</h1>
<div class="header_search">
<input type="text" class="search" name="search"/>
</div>
<div class="header_button">
<input type="button" id="search_button" value="查询"/>
</div>
<div class="header_member">
<a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>
</div>
</div>
</div>
<form id="reg" title="知问注册">
<ol class="reg_error"></ol>
<p>
<label for="user">账号:</label>
<input type="text" name="user" class="text"></input>
<span class="star">*</span>
</p>
<p>
<label for="pass">密码:</label>
<input type="text" name="pass" class="text" id="pass" />
<span class="star">*</span>
</p>
<p>
<label for="email">邮箱:</label>
<input type="text" name="email" class="text" id="email" />
<span class="star">*</span>
</p>
<p>
<label>性别:</label>
<input type="radio" name="sex" id="male" checked="checked"><label
for="male">男</label></input><input type="radio" name="sex" id="female"><label
for="female">女</label></input>
</p>
<p>
<label for="date">生日:</label>
<input type="text" name="date" readonly="readonly" class="text" id="date" />
</p>
</form>
<div id="loading">数据正在交互之中...</div>
</body>
</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=['aaa@163.com', 'bbb@163.com', 'ccc@163.com'];
$('#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=['aaa@163.com', 'bbb@163.com', 'ccc@163.com'];
$('#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);
},
});
});