jQuery的提交表單與AJAX問題

Question

這裏是我的jQuery代碼：

<script type="text/javascript"> 
    //<!-- 
$(document).ready(function() { 

    $('input[type="submit"]').click(function() { 
     $.ajax({ 
       type: 'POST', 
       url: $('form').attr('action'), 
       success: function(data) { 
        // 
       } 
     }); 
     return false; 
    }); 

}); //--> 
</script> 

我想點擊提交按鈕後做的是：

• ，從AJAX請求查明的頁面表單的動作屬性（這恰好是與表單相同的PHP腳本...所以基本上表單應該提交到同一頁面）。
• 用ajax請求返回值替換整個頁面的HTML。

但是，我不知道該怎麼做。頁面上沒有html或body標籤，因爲表單在使用jQuery的另一個頁面中變得混亂。

那麼如何用HTML ajax返回頁面的HTML？

這是整個HTML的樣子（這是evrything，沒有html或body標籤）：

<form enctype="application/x-www-form-urlencoded" method="post" action="editDocumentQuestion.php?iqid=-5"> 
    <dl> 
     <dt> 
      <label for="questionBody">Otázka:</label> 
     </dt> 
     <dd style="margin-left: 0;"> 
      <textarea name="questionBody" id="questionBody" rows="4" cols="95" style="border: 1px solid #2278B9; font-family: sans-serif;">Otazka</textarea> 

     </dd> 
     <dt style="padding-top: 1em;"> 
      <label for="questionCorrectAnswer">Odpovede:</label> 
     </dt> 
     <dd style="margin-left: 0;"> 
      <div class="pad-top"> 
       <div style="margin-right: 1em; float: left;"><input type="radio" name="questionCorrectAnswer" class="questionCorrectAnswer" value="1" checked="checked" />a)</div> 
       <div style="float: left;"><textarea name="questionAnswer1" id="questionAnswer1" rows="2" cols="88" style="border: 1px solid #2278B9; font-family: sans-serif;">Odpoved a</textarea></div> 

       <div style="clear: both; height: 0; line-height: 0;"></div> 
      </div> 
      <div class="pad-top"> 
       <div style="margin-right: 1em; float: left;"><input type="radio" name="questionCorrectAnswer" class="questionCorrectAnswer" value="2" />b)</div> 
       <div style="float: left;"><textarea name="questionAnswer2" id="questionAnswer2" rows="2" cols="88" style="border: 1px solid #2278B9; font-family: sans-serif;">Odpoved b</textarea></div> 
       <div style="clear: both; height: 0; line-height: 0;"></div> 
      </div> 
      <div class="pad-top"> 

       <div style="margin-right: 1em; float: left;"><input type="radio" name="questionCorrectAnswer" class="questionCorrectAnswer" value="3" />c)</div> 
       <div style="float: left;"><textarea name="questionAnswer3" id="questionAnswer3" rows="2" cols="88" style="border: 1px solid #2278B9; font-family: sans-serif;">Odpoved c</textarea></div> 
       <div style="clear: both; height: 0; line-height: 0;"></div> 
      </div> 
     </dd>    
     <dt> 
      &nbsp; 
     </dt> 

     <dd style="margin-left: 24.5em;"> 
      <input type="submit" name="editovatDokumentovuOtazku" id="editovatDokumentovuOtazku" value="Ulož" style="width: 6em; padding: .3em 0;" /> 
     </dd> 
    </dl> 
</form> 

<script type="text/javascript"> 
    //<!-- 
$(document).ready(function() { 

    $('input[type="submit"]').click(function() { 
     $.ajax({ 
       type: 'POST', 
       url: $('form').attr('action'), 
       success: function(data) { 
        // 
       } 
     }); 
     return false; 
    }); 

}); //--> 
</script> 

Answer 1

即使有，你應該能夠取代它像這樣沒有任何機構或HTML標籤：

<script type="text/javascript"> 
    //<!-- 
$(document).ready(function() { 

    $('input[type="submit"]').click(function() { 
     $.ajax({ 
       type: 'POST', 
       url: $('form').attr('action'), 
       success: function(data) { 
        $('body').html(data); 
       } 
     }); 
     return false; 
    }); 

}); //--> 
</script> 

的Firefox 3.6.8，IE 8和Chrome會自動插入html和body標籤，如果它們不存在（那些是我測試過的）

Answer 2

更換整個頁面 與Ajax請求的HTML返回值。

嘗試修改您的success處理程序是這樣的：

success: function(data) { 
    $('form').after(data).end().remove(); 
} 

它所做的是，它插入阿賈克斯數據後當前的形式.after(data)和end()用於恢復到形式，最後remove()用於刪除表單。