在進行jquery中ajax表單處理時遇到了這樣的問題：通過表單輸入數據當點擊提交時，發現提交後要顯示的數據不能顯示出來，但是數據確實傳給了服務器上的文件。
代碼如下
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <style type="text/css">
- * { margin:0; padding:0;}
- body { font-size:12px;}
- .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
- .comment h6 { font-weight:700; font-size:14px;}
- .para { margin-top:5px; text-indent:2em;background:#DDD;}
- </style>
- <!-- 引入jQuery -->
- <script src="../../jquery.js" type="text/javascript"></script>
- <script type="text/javascript">
- //<![CDATA[
- $(function(){
- $("#send").click(function(){
- $.get("get1.php", {
- username : $("#username").val() ,
- content : $("#content").val()
- }, function (data, textStatus){
- $("#resText").html(data); // 把返回的數據添加到頁面上
- }
- );
- })
- })
- //]]>
- </script>
- </head>
- <body>
- <form id="form1" action="#">
- <p>姓名: <input type="text" id="username" /></p>
- <p>內容: <textarea id="content" rows="2" cols="20"></textarea></p>
- <p><input type="submit" id="send" value="提交"/></p>
- </form>
- <div class='comment'>已有評論：</div>
- <div id="resText" >
- </div>
- </body>
- </html>
截圖：
經過調試發現，問題在於表單提交類型即是<input type='submit'>，因爲在jquery代碼中沒有阻止默認的表單提交行爲，所以整個表單執行了默認的行爲，所以只要在js代碼中加入'return false'阻止默認的行爲就行了。修正後的樣子應該是這樣的：
代碼：
瀏覽器中的樣子：
總結：在jquery中處理ajax表單請求是要阻止表單的默認行爲只要在js代碼中添加‘return false’語句或者把‘submit’修改爲‘button’。