Jquery李炎恢——52Ajax提交表单【18】

来源：互联网发布：php高级工程师面试题编辑：程序博客网时间：2024/05/05 04:12

学习要点：

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 NAME UTF8")or die("字符错误：".mysql_error());

二、Loading制作
在提交表单的时候，由于网络速度问题，可能会出现不同时间延迟。所以，为了更好的用户体验，在提交等待过程中，设置loading是非常有必要的。
//采用对话框式

$("#loading").dialog({

modal:true,

atuoOpen: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:funtion(form){

$(form).ajaxSubmit({

url:"add.php",

type:"POST",

beforeSubmit:function(formData,jqForm,options){

$("#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 20px center").html("数据提交成功......");

setTimeout(function{

$("#loading").dialog("close");

$("#loading").css("background","url(img/loading.gif) no-repeat 20px center").html("数据交互中......");

$("#reg").dialog("close");

$("#reg").resetForm();

$("#reg span.star").html("*").removeClass("success");

},1000);

}

});

}

0 0