成功后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); 
    }); 
}); 

编号：

我需要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，它会发送回阿贾克斯成功的功能。在这里，我们可以操作数据，但是，首先我们应该存储对被点击元素的引用。

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，然后再遍历数据由n的JSON数据，然后使用n从数组中调用数据。因此，如果第三个项目是名字，那么你可以做这样的事情

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

你将不得不通过编码JSON它可与json_encode PHP函数来完成从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>'); 

     } 
});