JQuery打造PHP的AJAX表单提交实例

 

本教程是演示如何利用PHP和Jquery无刷新提交一个表单，然后将表单信息以邮件的形式发送给管理员。

演示与下载：

查看演示Ajax Form 下载实例Demo Zip (解压密码为：www.code52.net )

Tips: 如果演示出现js错误或无法正常显示，请刷新一遍浏览器。这是由于JS下载不完全造成的。

本实例只利用到JQuery类库本身的函数和功能，不需要第三方插件的支持。另外，所有表单信息都是利用PHPMailer类库邮件的形式发送给管理员。如果你对JQuery的基本语法还不是很熟悉，请搜索本站的教程资源。如果你对PHPMailer用法不熟悉，请查看本站的另一篇文章《使用PHPMailer类库发送电子邮件》 。

第一步，创建一个表单HTML页面

这里，我们只展示主要的表单部分HTML结构代码：

1. < div  id ="contact_form" >   
2.   < form  name ="contact"  method ="post"  action ="" >   
3.     < fieldset >   
4.       < label  for ="name"  id ="name_label" > 姓名</ label >   
5.       < input  type ="text"  name ="name"  id ="name"  size ="30"  value =""  class ="text-input"  />   
6.       < label  class ="error"  for ="name"  id ="name_error" > 此项必填</ label >   
7.          
8.       < label  for ="email"  id ="email_label" > 您的Email</ label >   
9.       < input  type ="text"  name ="email"  id ="email"  size ="30"  value =""  class ="text-input"  />   
10.       < label  class ="error"  for ="email"  id ="email_error" > 此项必填</ label >   
11.          
12.       < label  for ="phone"  id ="phone_label" > 您的联系电话</ label >   
13.       < input  type ="text"  name ="phone"  id ="phone"  size ="30"  value =""  class ="text-input"  />   
14.       < label  class ="error"  for ="phone"  id ="phone_error" > 此项必填</ label >   
15.          
16.         < br  />   
17.       < input  type ="submit"  name ="submit"  class ="button"  id ="submit_btn"  value ="我要发送"  />   
18.     </ fieldset >   
19.   </ form >   
20. </ div >   

几点注意：

• 这里用一个id为contact_form来包含整个包含信息；这是有意义的，稍后在JavaScript与用户交互信息的时候会用到。
• 大家应该注意到了，这里form标签的属性里面既包含了method和action；这个意义其实不大，因为Javascript直接操作DOM，所以没有这两个属性也是可以的；
• 务必要给用户输入的<input>标签加独立的id，这和第二点原理类似。否则，无法看到正常的效果。

 

外观截图如下（美工来自互联网）：

 

第二步，开始添加JQuery代码

这里假设你已经从JQuery官方网站上下载了JQuery基库 ，然后上传到了你的WEB服务器，并添加到你要使用的网页 中了。

现在另外新建一个JS文件，添加如下代码：

1. $(function () {      
2.   $(".button" ).click(function () {      
3.     // 处理表单验证和交给后台处理的逻辑   
4.   });      
5. });    

• 第一行的function()函数与Jquery的document.ready 函数用法和功能相同，都是在DOM准备完毕后自动触发。
•  第二行里面是一个单击触发函数click()，需要注意的是，在HTML一页提交按钮上需要放置一个名为“button”的Class，以模拟实现submi提交表单的功能.
• 从第二点我们可以看出，JQuery可以很好的将结构和逻辑分离。

 

第三步，编写验证代码

在实际应用中，这一步是必不可少的。在用户漏填，错填某个项目时，及时提示。

1.   
2. $(function () {      
3.   $('.error' ).hide();      
4.   $(".button" ).click(function () {      
5.     // 验证代码   
6.           
7.     $('.error' ).hide();      
8.       var  name = $("input#name" ).val();      
9.         if  (name == "" ) {      
10.       $("label#name_error" ).show();      
11.       $("input#name" ).focus();      
12.       return  false ;      
13.     }      
14.         var  email = $("input#email" ).val();      
15.         if  (email == "" ) {      
16.       $("label#email_error" ).show();      
17.       $("input#email" ).focus();      
18.       return  false ;      
19.     }      
20.         var  phone = $("input#phone" ).val();      
21.         if  (phone == "" ) {      
22.       $("label#phone_error" ).show();      
23.       $("input#phone" ).focus();      
24.       return  false ;      
25.     }      
26.           
27.   });      
28. });      

几点注意：

• 第2行，我们添加一个$('.error').hide()是为了在用户未输入任何信息时隐藏三个class="error"提示错误的label标签。而只有当出现错误，即为空时，错误才会出现。（因为有return false的作用，每次仅会出现一个错误）
• 在JQuery里面，获取DOM中某个ID或者Class的值非常简单
  

  1. //获取id的值   
  2. var  name = $("input#name" ).val();   
  3. //获取class序号为1的值   
  4. var  name = $(".name" )[1].val();   
• 现假设用户没有输入姓名，处理逻辑应该是：首先显示错误，然后将焦点定位在姓名上。
  
  

  1. if  (name == "" ) {   //用户名为空   
  2.   $("label#name_error" ).show();   //错误提示   
  3.   $("input#name" ).focus();   //焦点定位   
  4.   return  false ;   //返回   
  5. }      
• 在必填的字段上验证时，都必须return false，否则会出现必填项未填完即提交的情况。

 

第四步，通过Jquery的Ajax函数提交表单信息。

这是本教程实现无刷新提交的核心步骤，通过ajax函数来递交javascript从DOM中获取的表单项值，然后异步提交给后台处理程序（process.php），并发送Email。此步紧接在验证程序之后：

1. var  dataString = 'name=' + name + '&email='  + email + '&phone='  + phone;   
2. //alert (dataString);return false;   
3.            
4. $.ajax({   
5.       type: "POST" ,   
6.       url: "bin/process.php" ,   
7.       data: dataString,   
8.       success: function () {   
9.         $('#contact_form' ).html("<div id='message'></div>" );   
10.         $('#message' ).html("<h2>联系方式已成功提交！</h2>" )   
11.         .append("<p>Script by Code52.net</p>" )   
12.         .hide()   
13.         .fadeIn(1500, function () {   
14.           $('#message' ).append("<img id='checkmark' src='images/check.png' />" );   
15.         });   
16.       }   
17.      });   
18.  return  false ;  

以上代码的核心函数是.ajax() ，它所起得作用就是使用POST方式将已经获取的表单信息(dataString)异步传送给所定义的后台PHP url(bin/process.php)。如果数据成功传送，它会将一系列我们定义好的信息返回给用户。最后return false，这样是为了防止页面重新加载。

除了返回成功信息和发送邮件外，我们还可以做其他一些更广泛的事情。比如，将获得的数据交由后台脚本处理时，将数据插入数据库中，然后再将用户提交的信息返回。

 

详细解释：

首先，获取表单项的值，方法我们已经在第三步中提到过了：

1. var  name = $("input#name" ).val();      
2. var  email = $("input#email" ).val();      
3. var  phone = $("input#phone" ).val();      
4. //将表单项的值组合成一个字符串   
5. var  dataString = 'name=' + name + '&email='  + email + '&phone='  + phone;      

将此组合字符串的值通过AJAX函数传递给后台url，如果成功，则会返回成功信息给用户：

1. $.ajax({      
2.   type: "POST" ,      
3.   url: "bin/process.php" ,      
4.   data: dataString,      
5.   success: function () {      
6.     $('#contact_form' ).html("<div id='message'></div>" );      
7.     $('#message' ).html("<h2>Contact Form Submitted!</h2>" )      
8.     .append("<p>We will be in touch soon.</p>" )      
9.     .hide()      
10.     .fadeIn(1500, function () {      
11.       $('#message' ).append("<img id='checkmark' src='images/check.png' />" );      
12.     });      
13.   }      
14. });      
15. return  false ;    

在本示例中，ajax函数的功能就只有这些了，如果你需要进一步关于ajax函数的信息，可以参考官方文档：jQuery's documentation on the ajax function

 

第五步，反馈信息给用户的部分

首先，在信息提交成功之后，JQuery会通过以下部分动态的替换掉<div id="contact_form"></form>中的内容，只需要简单的一句话即可实现。

1. $('#contact_form' ).html("<div id='message'></div>" );     

所以请大家记住，如果你以后需要通过JavaScript动态的替换掉某个层或者<span>，可以使用Jquery的.html方法实现，非常简单和方便。

其次，有了这个层肯定还不够，因为里面还没有内容，所以，我们还要给id=message的这个层添加一些显示内容：

1. $('#message' ).html("<h2>联系方式已成功提交！</h2>" )  

同样是动态的为id为message的层添加了一段html用于提示。还可以利用append方法在message层中追加一句：

1. .append("<p>We will be in touch soon.</p>" )      

最后，为了表现出提交之后，服务器处理的动态效果，我们设置了以下特效代码：

1. .hide()   //整个层消失   
2. .fadeIn(1500, function () {//在1500毫秒内逐渐出现   
3.  //最后再动态追加一个成功图标      
4.   $('#message' ).append("<img id='checkmark' src='images/check.png' />" );      
5. });     

在用户提交信息之后，会出现以下界面：

后记： 如果要将此实例运用在实际中，可能还需要对一些地方做出修改。比如，增加验证信息规则，在用户提交信息的过程中设置一个Loading的图标等等，本教程仅作抛砖引玉之用了。另外，请注意，后台提交数据给邮箱，我这里就不再解释了。打包下载的实例中有很详细的注释，你需要改动的地方仅仅是用户名和密码。下载压缩包之后，你也许会发现里面有个runonload.js文件，此文件的作用是在加载表单文件时，将焦点聚焦在输入表单上，仅此而已。

代码吾爱JavaScript专版，欢迎大家对此文提出建议和意见。

历史上的今天：

JQuery常用方法基础教程 2009-05-14

让网站变灰色代码特效,5.12纪念专用 2009-05-14

如何解决jQuery.ajax提交GB2312或GBK编码中文乱码问题 2009-05-14

网线的直通线与交叉线 2009-05-14

“雷语”100句 2009-05-14

随机文章：

jquery验证表单简单例子 2009-07-08

如何解决jQuery.ajax提交GB2312或GBK编码中文乱码问题 2009-05-14

JQuery常用方法基础教程 2009-05-14

(完美解决JQuery Form中文乱码问题 2008-12-10

jQuery拖拽功能效果演示 2008-12-09