歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> jQuery中Ajax表單處理遇到無響應情況

jQuery中Ajax表單處理遇到無響應情況

日期:2017/3/1 10:15:20   编辑:Linux編程

在進行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. <div class='comment'>已有評論:</div>
  38. <div id="resText" >
  39. </div>
  40. </body>
  41. </html>

截圖:

經過調試發現,問題在於表單提交類型即是<input type='submit'>,因為在jquery代碼中沒有阻止默認的表單提交行為,所以整個表單執行了默認的行為,所以只要在js代碼中加入'return false'阻止默認的行為就行了。修正後的樣子應該是這樣的:

代碼:

浏覽器中的樣子:

總結:在jquery中處理ajax表單請求是要阻止表單的默認行為只要在js代碼中添加‘return false’語句或者把‘submit’修改為‘button’。

Copyright © Linux教程網 All Rights Reserved