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的样子（这是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 使用ajax请求返回值。

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

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

它的作用是在当前表单之后使用.after(data)插入ajax数据，end()用于还原到表单，最后remove()用于删除表单。

Answer 2

即使没有正文或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标签（如果它们不存在）（那些是我测试过的）

jQuery提交表单与AJAX问题

2 个答案: