jQuery中Ajax表单处理遇到无响应情况


在进行jQuery中Ajax表单处理时遇到了这样的问题：通过表单输入数据当点击提交时，发现提交后要显示的数据不能显示出来，但是数据确实传给了服务器上的文件。

代码如下

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title></title> 
  5.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6. <style type="text/css"> 
  7. * { margin:0; padding:0;} 
  8. body { font-size:12px;} 
  9. .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} 
  10. .comment h6 { font-weight:700; font-size:14px;} 
  11. .para { margin-top:5px; text-indent:2em;background:#DDD;} 
  12. </style> 
  13.  <!--   引入jQuery --> 
  14. <script src="../../jquery.js" type="text/javascript"></script> 
  15. <script type="text/javascript"> 
  16. //<![CDATA[ 
  17.     $(function(){ 
  18.        $("#send").click(function(){ 
  19.             $.get("get1.php", {  
  20.                         username :  $("#username").val() ,  
  21.                         content :  $("#content").val()   
  22.                     }, function (data, textStatus){ 
  23.                         $("#resText").html(data); // 把返回的数据添加到页面上 
  24.                     } 
  25.             ); 
  26.        }) 
  27.     }) 
  28. //]]> 
  29. </script> 
  30. </head> 
  31. <body> 
  32. <form id="form1" action="#"> 
  33.  <p>姓名: <input type="text" id="username" /></p> 
  34.  <p>内容: <textarea id="content"  rows="2" cols="20"></textarea></p> 
  35.  <p><input type="submit" id="send" value="提交"/></p> 
  36. </form> 
  37.  
  38.  
  39. <div  class='comment'>已有评论：</div> 
  40. <div id="resText" > 
  41. </div> 
  42.  
  43. </body> 
  44. </html> 

截图：

jQuery中Ajax表单处理遇到无响应情况

jQuery中Ajax表单处理遇到无响应情况

经过调试发现，问题在于表单提交类型即是<input type='submit'>，因为在jquery代码中没有阻止默认的表单提交行为，所以整个表单执行了默认的行为，所以只要在js代码中加入'return false'阻止默认的行为就行了。修正后的样子应该是这样的：

代码：

jQuery中Ajax表单处理遇到无响应情况

浏览器中的样子：

jQuery中Ajax表单处理遇到无响应情况

总结：在jquery中处理ajax表单请求是要阻止表单的默认行为只要在js代码中添加‘return false’语句或者把‘submit’修改为‘button’。

相关内容