使用jquery不刷新前台页面完成提交表单的例子。 

前台文件： 
Html代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>不刷新页面提交表单测试</title>  
  6. </head>  
  7. <body>  
  8. <h1>不刷新页面提交表单测试</h1>  
  9. <br />  
  10. <input name="writer" id="writer" type="text" value="" />  
  11. <input name="pass" id="pass" type="password" value="" />  
  12. <input type="submit" name="submit" id="submit" value="提交" />  
  13. </body>  
  14. </html>  


Js代码   收藏代码
  1. <script type="text/javascript" src="js/jquery.js"></script>  
  2. <!-- 这里不需要form，因为提交时call一个函数 -->  
  3. <script type="text/javascript">  
  4. $(document).ready(function(){// DOM的onload事件处理函数  
  5.     $("#submit").click(function(){// 当按钮submit被点击时的处理函数  
  6.         postdata();// submit别点击时执行postdata函数  
  7.     });  
  8. });  
  9.   
  10. function postdata(){// 提交数据函数  
  11.     $.ajax({// 调用jquery的ajax方法  
  12.         type:"POST",// 设置ajax方法提交数据的形式  
  13.         url:"ok.php",// 把数据提交到ok.php  
  14.           
  15.         /* 输入框writer中的值作为提交的数据， 
  16.          * 必须使用key/value的形式，如"key=value"， 
  17.          * 如果多个键值对，就使用&分隔开， 
  18.          * 如"key1=value1&key2=value2" */  
  19.         data: "writer="+$("#writer").val()+"&pass="+$("#pass").val(),  
  20.         success:function(msg){// 提交成功后的回调，msg变量是ok.php输出的内容  
  21.                     alert("数据提交成功");// 如果有必要，可以把msg变量的值显示到某个DIV元素中  
  22.                     alert(msg);  
  23.                 }  
  24.     });  
  25. }  
  26. </script>  


后台文件： 
Php代码   收藏代码
  1. <?php  
  2. $writer=$_POST['writer'];  
  3. $pass=$_POST['pass'];  
  4. if(!emptyempty($writer)&&!emptyempty($pass)){  
  5.     echo $writer.$pass."<br/>";  
  6. }else{  
  7.     echo "Empty!";  
  8. }  
  9. ?>