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

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

Итак, как заменить HTML-страницу на HTML-код ajax?

Это как весь HTML выглядит (это Evrything, нет HTML или тело тега):

<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 и теги тела, если они не присутствуют (те, которые я тестировал против)

Answer 2

заменить HTML всей страницы с запросом АЯКС возвращаемого значения.

Попробуйте изменить свой success обработчик, как это:

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

Что она делает это, что он вставляет АЯКС данные после текущей формы с .after(data) и end() используется для возврата к форме и, наконец, remove() используется для удаления формы.