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;
            });
        });
    });

当我们在这里的时候，这里是处理这个 ajax 调用的 php 函数：

//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' );

照原样，一切正常，只是在重新加载下一页之前不会显示更改。

我认为我需要将刷新数据的函数添加到成功：处理程序中，但我找不到一个可以更新从数据库中提取的内容的示例。

所以我的问题是： 如何在 ajax 调用后仅刷新更新的内容，并尽可能保持扩展 div 的可见性？

任何帮助将不胜感激！ 注意：我几乎不是一个中级 jQuery 用户，这是我第一次尝试 ajax，所以最好假设我什么都不知道，如果它阻止了一些重要的事情发生在我的头上。 ;)

更新：我认为我正在取得进展，但仍然缺少一些东西。建议的解决方案的问题是 .html(data) 返回“0”。通过从 ajax 调用中删除行：url:ajaxurl,，现在返回的是整个页面内容。我真正需要返回的只是更新的内容。

Answer 1

首先，您想要对一个页面/url 进行 POST，该页面/url 将只返回某个元素的更新内容（例如，id="id"）。比如你打个电话

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

PHP 页面直接返回

<?php echo "thisisnewcontent"; ?>

然后您可以使用

更新任何 DOM 元素的 html

$("css_selector").html(newContent); // newContent will contain "thisisnewcontent"

您应该在 ajax 成功函数中进行此更新，其中 'data' 表示您从服务器接收到的数据。

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

您可以在此处http://api.jquery.com/jQuery.ajax 和此处阅读有关 ajax() 和 html() 的更多信息 http://api.jquery.com/html/

祝你好运！