带有 AJAX 问题的 jQuery 提交表单

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>

点击提交按钮后我想做的是：

• 向由表单的 action 属性标识的页面发出 AJAX 请求（恰好是与表单相同的 php 脚本......所以基本上表单应该提交到同一页面）。
• 用ajax请求返回值替换整个页面的HTML。

但是，我不知道该怎么做。表单页面上没有 html 或 body 标记，因为表单正在使用 jQuery 嵌入到另一个页面中。

那么如何用 HTML ajax 返回的 HTML 替换页面的 HTML 呢？

这就是整个 HTML 的样子（这是所有东西，没有 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

即使没有 body 或 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

替换整个页面的HTML 用ajax请求返回值。

尝试像这样修改您的 success 处理程序：

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

它的作用是在您当前的表单之后插入 ajax 数据，.after(data) 和 end() 用于恢复到表单，最后remove() 用于删除表单.