[转]Jquery+PHP表单提交

来源：创建一个表单

1. <div class="block"> 
2. <div class="done"> 
3. <b>Thank you !b> We have received your message.   
4. div> 
5.     <div class="form"> 
6.     <form method="post" action="process.php"> 
7.     <div class="element"> 
8.         <label>Namelabel> 
9.         <input type="text" name="name" class="text" /> 
10.     div> 
11.     <div class="element"> 
12.         <label>Emaillabel> 
13.         <input type="text" name="email" class="text" /> 
14.     div> 
15.     <div class="element"> 
16.         <label>Websitelabel> 
17.         <input type="text" name="website" class="text" /> 
18.     div> 
19.     <div class="element"> 
20.         <label>Commentlabel> 
21.         <textarea name="comment" class="text textarea" />textarea> 
22.     div> 
23.     <div class="element"> 
24.           
25.         <input type="submit" id="submit"/> 
26.         <div class="loading">div> 
27.     div> 
28.     form> 
29.     div> 
30. div> 
31. <div class="clear">div>

创建如下css代码：

1. body{text-align:center;}  
2.  
3. .clear {clear:both}  
4.  
5. .block {  
6.     width:400px;  
7.     margin:0 auto;  
8.     text-align:left;  
9. }  
10. .element * {  
11.     padding:5px;   
12.     margin:2px;   
13.     font-family:arial;  
14.     font-size:12px;  
15. }  
16. .element label {  
17.     float:left;   
18.     width:75px;  
19.     font-weight:700 
20. }  
21. .element input.text {  
22.     float:left;   
23.     width:270px;  
24.     padding-left:20px;  
25. }  
26. .element .textarea {  
27.     height:120px;   
28.     width:270px;  
29.     padding-left:20px;  
30. }  
31. .element .hightlight {  
32.     border:2px solid #9F1319;  
33.     background:url(iconCaution.gif) no-repeat 2px 
34. }  
35. .element #submit {  
36.     float:right;  
37.     margin-right:10px;  
38. }  
39. .loading {  
40.     float:right;   
41.     background:url(ajax-loader.gif) no-repeat 1px;   
42.     height:28px;   
43.     width:28px;   
44.     display:none;  
45. }  
46. .done {  
47.     background:url(iconIdea.gif) no-repeat 2px;   
48.     padding-left:20px;  
49.     font-family:arial;  
50.     font-size:12px;   
51.     width:70%;   
52.     margin:20px auto;   
53.     display:none 
54. }

1. .hightlight : 错误高亮显示信息
2. .loading:预加载动画样式
3. .done：成功后信息样式

来看javascript实现过程

1. $(document).ready(function() {  
2.       
3.     //提交表格后触发的事件 
4.     $('#submit').click(function () {          
5.           
6.         //获取表单中域的值  
7.         var name = $('input[name=name]');  
8.         var email = $('input[name=email]');  
9.         var website = $('input[name=website]');  
10.         var comment = $('textarea[name=comment]');  
11.  
12.         //简单的验证过程 
13.         if (name.val()=='') {  
14.             name.addClass('hightlight');  
15.             return false;  
16.         } else name.removeClass('hightlight');  
17.           
18.         if (email.val()=='') {  
19.             email.addClass('hightlight');  
20.             return false;  
21.         } else email.removeClass('hightlight');  
22.           
23.         if (comment.val()=='') {  
24.             comment.addClass('hightlight');  
25.             return false;  
26.         } else comment.removeClass('hightlight');  
27.           
28.         //合并发送参数
29.         var data = 'name=' + name.val() + '&email=' + email.val() + '&website=' 
30.         + website.val() + '&comment='  + encodeURIComponent(comment.val());  
31.           
32.         //显示所有的文本
33.         $('.text').attr('disabled','true');  
34.           
35.         //显示预加载动画 
36.         $('.loading').show();  
37.           
38.         //ajax提交表单 
39.         $.ajax({  
40.             //后台处理数据的路径
41.             url: "process.php",   
42.               
43.             //所使用的方法  
44.             type: "GET",  
45.  
46.             //发送给后台的参数           
47.             data: data,       
48.               
49.             //取消缓存 
50.             cache: false,  
51.               
52.             //成功后的回调函数
53.             success: function (html) {                
54.                 //根据后台返回的1或0判断其成功与否
55.                 if (html==1) {                    
56.                     //隐藏表单 
57.                     $('.form').fadeOut('slow');                   
58.                       
59.                     //显示成功后的信息
60.                     $('.done').fadeIn('slow');  
61.                       
62.   
63.                 } else alert('Sorry, unexpected error. Please try again later.');                 
64.             }         
65.         });  
66.           
67.         //取消提交按钮的默认动作 
68.         return false;  
69.     });   
70. });

再来看后台处理过程

1. //接受前台数据
2. $name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
3. $email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
4. $website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];
5. $comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment'];
6.  
7. if ($_POST) $post=1;
8.  
9. //错误信息
10. if (!$name) $errors[count($errors)] = 'Please enter your name.';
11. if (!$email) $errors[count($errors)] = 'Please enter your email.';
12. if (!$comment) $errors[count($errors)] = 'Please enter your comment.';
13.  
14. //判断是否正确
15. if (!$errors) {
16.  
17.     if ($_POST) {
18.         echo 'Thank you! We have received your message.';
19.        
20.  
21.     } else {
22.         echo '1';   
23.     }
24.  
25.  
26. } else {
27.  
28.     for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '
    ';
29.     echo 'Back';
30.     exit;
31. }

这只是模拟的过程，实际上这个php代码没有任何写入数据库的动作，只是判断前台的提交方式。但已经很好的演示了处理逻辑