2

我正在用 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当时的 a 值来更新类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);
});
4

2 回答 2

1

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

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

现在在我们的成功函数中，而不是data只使用 use 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
    }));
}

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

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

于 2013-03-26T06:07:26.980 回答
0

我不完全理解您的问题，所以让我们假设您要更改的内容是具有类 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>');

        }
});
于 2013-03-26T05:56:33.600 回答