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

学习要点：

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);

          }

       },

   });

}