如何刷新ajax更新後的內容？

Question

我有一個WordPress插件的管理頁面，感謝stackoverflow社區，我學會了如何添加ajax調用到所有添加/刪除/更新插件訪問問題和答案的函數。

爲了幫助它想象：

下一步就是要刷新一個成功的Ajax調用後的內容。當然，我不想重新加載頁面，我認爲刷新整個頁面可能會導致應答div崩潰，這是不可取的。因此只刷新相關內容是最好的。

與以下調用數據庫生成的問題清單：

<?php 
    $qresult = $wpdb->get_results("SELECT * FROM " . $wpdb->prefix . "ccd_ex_questions ORDER BY sort ASC"); 
    $qcount = $wpdb->num_rows; 
    foreach($qresult as $key => $qrow) { 
    ?> 

     <div id="question<?php echo $qrow->id; ?>" class="display-questions"> 
      <form id="update-question-<?php echo $qrow->id; ?>" action="" method="post"> 

          //question form and content 

      </form> {snip...} 

和答案做過類似的與循環產生的問題清單內：

<?php 
$aresult = $wpdb->get_results("SELECT * FROM " . $wpdb->prefix . "ccd_ex_answers WHERE question_id = " . $qrow->id . " ORDER BY sort ASC"); 
foreach($aresult as $key => $arow) { 
?>  

    <form id="update-answer-<?php echo $arow->question_id."-".$arow->id; ?>" action="" method="post"> 

      //answer form and content 

    </form> {snip...} 

以下是使用ajax調用來更新內容的jQuery函數之一：

//Add New Answer 
    jQuery(document).ready(function($) {   
     $('.asubmitbutton').live("click", function(){ 
     var thisasubmit = $(this).data('asubmit'); 
      $(thisasubmit).submit(function(){ 

       // Get the proper instance of the form fields for the variables 
       var answer = $(this).find('.answer').val(); 
       var sort = $(this).find('.sort').val(); 
       var correct = $(this).find('.correct').val(); 
       var question_id = $(this).find('.question_id').val(); 

       $.ajax({ 
        type: 'POST', 
        url: ajaxurl, 
        data: { 
         action: 'ccd_ex_insert_answer', 
         answer: answer, 
         sort: sort, 
         correct: correct, 
         question_id: question_id 
        }, 
        success: function(data, textStatus, XMLHttpRequest){ 
        console.log(data); 
        console.log(answer); 
        console.log(sort); 
        console.log(correct); 
        }, 
        error: function(MLHttpRequest, textStatus, errorThrown){ 
         alert(errorThrown); 
        } 
       }); 
      return false; 
      }); 
     }); 
    }); 

雖然我們在這，這裏的PHP函數處理這個Ajax調用：

//Add an answer 
function ccd_ex_insert_answer() { 
    global $wpdb; 
    $wpdb->insert($wpdb->prefix . 'ccd_ex_answers', array( 
     'answer' => $_POST['answer'], 
     'sort' => (int)$_POST['sort'], 
     'correct' => (bool)$_POST['correct'], 
     'question_id' => (int)$_POST['question_id'] 
     ) 
    ); 
} 
add_action('wp_ajax_ccd_ex_insert_answer', 'ccd_ex_insert_answer'); 

原樣，一切正常，只是改變不顯示，直到下一個頁面重新加載。

我認爲我需要添加函數來將數據刷新到success：handler中，但是我找不到更新從數據庫中提取的內容的示例。

所以我的問題是：如何Ajax調用後只刷新更新的內容，可能的話，保持擴張的div的知名度？

任何幫助將不勝感激！ 注：我幾乎不是一箇中級jQuery用戶，這是我第一次嘗試ajax，所以最好假設我什麼都不知道，如果它阻止了一些重要的東西在我頭上射擊。 ;）

更新：我認爲我正在取得進展，但仍然缺少一些東西。提出的解決方案的問題是.html（數據）返回'0'。通過刪除該行：url：ajaxurl，來自ajax調用，現在返回的是整個頁面內容。我真正需要返回的僅僅是更新後的內容。

Answer 1

首先，您要對頁面/網址執行POST操作，該頁面將僅返回某個元素的更新內容（比如id =「id」）。例如，你做一個呼叫

$.ajax({url:"http://example.com/newcontent.php", ...}); 

和PHP頁面簡單地返回

<?php echo "thisisnewcontent"; ?> 

然後，您可以用

​​

你應該這樣做更新更新任何DOM元素的HTML在ajax成功函數中，'data'代表您從服務器收到的數據。

$.ajax({ ..., success: function(data, textStatus, XMLHttpRequest) { 
    $("#id").html(data); 
}); 

你可以讀到更多關於Ajax（）和HTML（）在這裏http://api.jquery.com/jQuery.ajax這裏 http://api.jquery.com/html/

祝你好運！