在div ajax中刷新元素

Question

我有一个小的web应用程序，管理一些课程，并为他们报告统计数据(完成和未完成)。当点击.finish按钮时，我想刷新课程的统计div。

php文件:

 <?php
    include_once('config_mysql.php');
    $data = new MysqlClass();
    $data->connect();
    $sql = "select * from Lessons";
    $result = mysql_query($sql);
    <div class="history">
    while($row = mysql_fetch_array($result)) {
     <div>
      <h2>name: <?php echo $row['name']; ?>
      <h2>completed: <?php echo $row['completed']; ?>
     </div>
    }
   </div>
    ?>

和附加到.finish类的事件处理程序:

$(document).ready(function () {
    $('.finish').click(function(event){
        completeLesson();
         $.ajax({
                    type: "POST",
                    url: "statistic.php",
                    success: function(html){
                    }
        });  
    }
}

我没有包括completeLesson()函数(它也进行AJAX调用)，因为它不重要。

我想在不刷新页面的情况下刷新课程统计。我尝试用AJAX调用刷新它，但它没有更新数据。谢谢你的回答。

Answer 1

你至少有两个问题。

首先，您需要在success回调中对变量html做一些事情。

第二，由于completeLesson调用了它自己的ajax，所以必须等待该调用返回，然后才能调用statistic.php。如果不等待，则有可能第二次Ajax调用将在第一次调用之前完成，并且它不会带来新数据。

一种解决方案是将第二个Ajax调用作为回调函数传递给completeLesson。

function completeLesson ( /* your other arguments */, callback) {
    // this would be the Ajax call already in completeLesson
    $.ajax ( {
        // whatever arguments you use for the ajax call
        success: function (data) {
            // the code you had in here before...
            // after all that code add these 2 lines
            if (callback)
                callback();
        }
    });
}

现在，您将finish的事件侦听器更改为(假设statistics .php在<div id="result"><?php include 'statistic.php'; ?></div>之间回显，并且您已将id="#hs"添加到.historydiv):

$('.finish').click(function(event) {
    completeLesson(function() {
        $.ajax({
            type: "POST",
            url: "statistic.php",
            success: function(html) {
                $('#hs').remove();
                $('#result').prepend(html);
            }
        });
    });  
}

您可以使用$('#result').append(html)而不是prepend