关闭

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

81人阅读 评论(0) 收藏 举报


学习要点:

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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6442次
    • 积分:308
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:56篇
    • 译文:0篇
    • 评论:0条
    文章分类