Question

我有一个WordPress插件的管理页面，感谢stackoverflow社区，我已经学会了如何为所有添加/删除/更新问题的函数添加ajax调用以及该插件的访问答案。

帮助想象它： enter image description here

下一步是在成功调用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' );

原样，一切正常，但更改不会显示，直到下一页重新加载。

我认为我需要添加函数来将数据刷新到success：handler中，但是我找不到更新从数据库中提取的内容的示例。

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

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

更新：我认为我正在取得进展，但仍然缺少一些东西。提出的解决方案的问题是.html（数据）正在返回＆＃39; 0＆＃39;。通过从ajax调用中删除行： url：ajaxurl，，现在返回的是整个页面内容。我真正需要返回的只是更新的内容。

Answer 1

首先，您要对页面/网址执行POST操作，该页面/网址仅返回特定元素的更新内容（例如，使用id =“id”）。例如，你打电话

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

，PHP页面只返回

<?php echo "thisisnewcontent"; ?>

然后，您可以使用

更新任何DOM元素的html

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

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

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

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

祝你好运！

如何在ajax更新后刷新内容？

1 个答案: