jQuery AJAX 成功后刷新页面内容

Question

我正在使用 jQuery .click() 更新我的数据库，然后调用我的 AJAX；我的问题是，一旦 SQL 运行了刷新页面内容的最佳方式，我就可以再次执行上一个操作，目前我正在使用window.location.reload(true);，但我不喜欢这种方法，因为我不想让页面重新加载我想要的只是我用来更新它的元素上的内容，以便在 AJAX 成功后匹配数据库字段

这是我的 jQuery：

$(document).ready(function(){
    $("span[class*='star']").click(function(){
        var data = $(this).data('object');

        $.ajax({
            type: "POST",
            data: {art_id:data.art_id,art_featured:data.art_featured},
            url: "ajax-feature.php",
            success: function(data){
                if(data == false) {
                    window.location.reload(true);
                } else {
                    window.location.reload(true);
                }  
            }
        });
        console.log(data.art_featured);
    });
});

PHP：

<section class="row">
    <?php
    $sql_categories = "SELECT art_id, art_featured FROM app_articles" 

    if($result = query($sql_categories)){
        $list = array();

        while($data = mysqli_fetch_assoc($result)){
            array_push($list, $data);
        }

        foreach($list as $i => $row){
    ?>
    <div class="row">
        <div class="column one">
            <?php if($row['art_featured']==0){
            ?>
            <span data-object='{"art_id":"<?php echo $row['art_id'];?>", "art_featured":"<?php echo $row['art_featured'];?>"}' class="icon-small star"></span>
            <?php
                } else if($row['art_featured']==1) {
            ?>
            <span data-object='{"art_id":"<?php echo $row['art_id'];?>", "art_featured":"<?php echo $row['art_featured'];?>"}' class="icon-small star-color"></span>
            <?php
                }
            ?>
        </div>
    </div>
    <?php
        }
    } else {
        echo "FAIL";
    }
    ?>
</section>

编辑：

我需要用art_featured 更新.star 或.star-color 类，具体取决于当时art_featured 的值，基本上我在哪里回显art_featured 我需要那个Ajax 成功后重新加载。

编辑：

$("span[class*='star']").click(function(){
    var data = $(this).data('object');
    var $this = $(this); //add this line right after the above

    $.ajax({
        type: "POST",
        data: {art_id:data.art_id,art_featured:data.art_featured},
        url: "ajax-feature.php",
        success:function(art_featured){
            //remember $this = $(this) from earlier? we leverage it here
            $this.data('object', $.extend($this.data('object')),{
                art_featured: art_featured
            });
        }
    });
    console.log(data.art_featured);
});

Answer 1

如果你可以在 MySQL 数据库成功后返回 art_featured，它会将它发送回 ajax 成功函数。在这里，我们可以操作数据，但是，首先我们应该存储对被点击元素的引用。

var data = $(this).data('object');
var $this = $(this); //add this line right after the above

现在在我们的成功函数中，不要使用data，而是使用art_featured，因为这就是我们要返回的全部内容。现在我们可以更新目标上的现有数据对象了。

success:function(art_featured){
    //remmeber $this = $(this) from earlier? we leverage it here
    $this.data('object', $.extend($this.data('object'),{
        art_featured: art_featured
    }));
}

以上将扩展现有的数据对象，允许基于我们正在扩展的对象重新定义键：值对。

您应该会发现它按预期工作。

Answer 2

我不完全理解您的问题，所以我们假设您要更改的内容是一个具有类 div 的 div，并且您想用刚刚发送的内容（即数据）替换内容。然后你需要返回数据（可能使用 JSON 是最简单的），然后你的调用将是

  $.ajax({
        type: "POST",
        data: {art_id:data.art_id,art_featured:data.art_featured},
        url: "ajax-feature.php",
        dataType:'json',
        success: function(data){
          for(n in data){
            $('.div').append('<p>'+data[n]+'</p>');
            }
        }
});

注意添加 dataType 返回为 json，然后通过 for n in data 遍历 json 数据，然后使用 n 从数组中调用数据。因此，如果第三项是名称，那么您可以执行类似的操作

 $('.div').append('<p>Name is '+data[3]+'</p>');

您必须通过 json 编码从 PHP 表单返回数据，这可以使用 json_encode php 函数完成。如果是跨域，则必须使用 jsonp

编辑： 如果您在发送表单之前已经知道要替换的数据（即不需要响应），那么您可以将这些变量放入成功回调中。这将等待 ajax 成功返回，然后更新您的 div。

所以你可以拥有这个

var updateText = yourDataFromForm

$.ajax({
        type: "POST",
        data: {art_id:data.art_id,art_featured:data.art_featured},
        url: "ajax-feature.php",
        dataType:'json',
        success: function(data){

            $('.div').append('<p>'+updateText+'</p>');

        }
});