成功後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>'); 

     } 
});