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>

编辑：

我需要使用.star更新课程.star-color或art_featured，具体取决于art_featured当时的价值，基本上我在哪里回应out 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迭代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>');

        }
});

jQuery AJAX成功后刷新页面内容

2 个答案: