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

转载 2016年08月28日 22:23:53


学习要点:

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

          }
       },
   });
}


Jquery李炎恢——15表单选择器

学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为HTML中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以使用之前的常规选择器或过滤器,也可以使用Jquery为表单专门提...

Jquery李炎恢——18,19事件对象

学习要点: 1.事件对象 2.冒泡和默认行为 javaScript在事件处理函数中默认传递了event对象,也就是事件对象。但由于浏览器的兼容性,开发者总是会做兼容性方面的处理。jquery在封装...

李炎恢jQuery笔记7表单选择器

val(); //选择type 为password 的字段 $('input[name=user]').val(); //选择name 为user 的字段 那么对于id 和类(class)用法比较...

Jquery李炎恢——29,30Ajax进阶

学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON和JSONP 在Ajax课程中,我们了解了最基本的异步处理方式。本章,我们将了解一下Ajax的一些全局请求事件、跨域处理和其...

Jquery李炎恢——26,27,28Ajax

学习要点: 1.Ajax概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax()方法 6.表单序列化 Ajax...

Jquery——Day7(Ajax提交表单)

1、创建数据库 名称为“zhiwen”,表为id、user、pass、email、sex、birthday、date 创建php文件:config.php、add.php、is_user.php (1...
  • zxy9602
  • zxy9602
  • 2017年03月03日 11:09
  • 128

Jquery李炎恢——23,24,25动画效果

学习要点: 1.显示、隐藏 2.滑动、卷动 3.淡入、淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 在以前很长一段时间里,网页上的各种特效还需要采用flash在进行。...

Jquery李炎恢——39按钮UI【5】

学习要点: 1.使用button按钮 2.修改button样式 3.button()方法的属性 4.butto("action",param) 5.单选、复选按钮 按钮可以给生硬的原生按钮或者文本...

Jquery李炎恢——31,32工具函数

学习要点: 1.字符串操作 2.数组和对象操作 3.测试操作 4.URL操作 5.浏览器检测 6.其他操作 工具函数是指直接依附于jquery对象,针对jquery对象本身定义的方法,即全局性的...

Jquery李炎恢——47,48,49验证插件【13】【14】【15】

学习要点: 1.使用validate.js插件 2.默认验证规则 3.validate()方法和选项 4.validate.js其他功能 验证插件(validate.js),是一款验证常规表单数据...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery李炎恢——52Ajax提交表单【18】
举报原因:
原因补充:

(最多只允许输入30个字)