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

第一步，创建一个表单HTML页面
这里，我们只展示主要的表单部分HTML结构代码：

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

几点注意：

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

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

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

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

 

  
1. $(function() {      
  $('.error').hide();      
2.   $(".button").click(function() {      
    // 验证代码   
3.           
    $('.error').hide();      
4.       var name = $("input#name").val();      
        if (name == "") {      
5.       $("label#name_error").show();      
      $("input#name").focus();      
6.       return false;      
    }      
7.         var email = $("input#email").val();      
        if (email == "") {      
8.       $("label#email_error").show();      
      $("input#email").focus();      
9.       return false;      
    }      
10.         var phone = $("input#phone").val();      
        if (phone == "") {      
11.       $("label#phone_error").show();      
      $("input#phone").focus();      
12.       return false;      
    }      
13.           
  });      
14. });      

几点注意：

• 第2行，我们添加一个$('.error').hide()是为了在用户未输入任何信息时隐藏三个class="error"提示错误的label标签。而只有当出现错误，即为空时，错误才会出现。（因为有return false的作用，每次仅会出现一个错误）
• 在JQuery里面，获取DOM中某个ID或者Class的值非常简单
  
  //获取id的值   
• var name = $("input#name").val();   
//获取class序号为1的值   
• var name = $(".name")[1].val();   
• 现假设用户没有输入姓名，处理逻辑应该是：首先显示错误，然后将焦点定位在姓名上。
  
  
  if (name == "") {   //用户名为空   
•   $("label#name_error").show();   //错误提示   
  $("input#name").focus();   //焦点定位   
•   return false;   //返回   
}      
• 在必填的字段上验证时，都必须return false，否则会出现必填项未填完即提交的情况。

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

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

以上代码的核心函数是.ajax() ，它所起得作用就是使用POST方式将已经获取的表单信息(dataString)异步传送给所定义的后台PHP url(bin/process.php)。如果数据成功传送，它会将一系列我们定义好的信息返回给用户。最后return false，这样是为了防止页面重新加载。除了返回成功信息和发送邮件外，我们还可以做其他一些更广泛的事情。比如，将获得的数据交由后台脚本处理时，将数据插入数据库中，然后再将用户提交的信息返回。 
详细解释：
首先，获取表单项的值，方法我们已经在第三步中提到过了：

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

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

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

在本示例中，ajax函数的功能就只有这些了，如果你需要进一步关于ajax函数的信息，可以参考官方文档：jQuery's documentation on the ajax function 
第五步，反馈信息给用户的部分
首先，在信息提交成功之后，JQuery会通过以下部分动态的替换掉<div id="contact_form"></form>中的内容，只需要简单的一句话即可实现。

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

所以请大家记住，如果你以后需要通过JavaScript动态的替换掉某个层或者<span>，可以使用Jquery的.html方法实现，非常简单和方便。其次，有了这个层肯定还不够，因为里面还没有内容，所以，我们还要给id=message的这个层添加一些显示内容：

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

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

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

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

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

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

学习了

不错~~！！！

很好 受教了