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 на страницу, указанную в формеАтрибут action (который является тем же php-скриптом с формой ... так что в основном форма должна отправляться на ту же страницу).
• замените HTML всей страницы возвращаемым значением запроса ajax.

Однако я не знаю, как это сделать.На странице вместе с формой нет тегов html или body, так как форма включается в другую страницу с помощью jQuery.

Итак, как заменить HTML страницы возвратами HTML ajax?

Вот так выглядит весь 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() используется для удаления формы.