如何使用Ajax重新加载数据

Question

我有一个方法可以获取所有产品。

function listProducts() {
  $.get("./listProducts", function(data) {
    data.forEach(function(item) {
      var $clone = $('#product').clone().removeAttr('id');
      $clone.find('.productName').text(item.nameEn);
      $clone.appendTo('#rowProducts');
    });
 });
};

我有另一种添加产品的方法，我希望在添加新产品时，在成功方法中重新加载以获取新产品列表的上一个方法listProducts()。

$(document).ready(function() {
  $('#validProduct').on("click", function(e) {
     ......
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : "./addProduct",
        data : JSON.stringify(product),
        dataType : 'json',
        timeout : 6000,
        success : function(data) {
         /* **reload listProducts** */
        }
    });
  });
});

- Aymen Kanzari

---

这有问题吗？ - Rory McCrossan

你是否尝试在需要的地方调用你的 listProducts() 函数了吗？ - Puroto

那么只需要再次调用lisProducts()函数吗？你的数据应该已经在服务器上了。 - callback

当我这样做时，它不会重新加载，而是再次显示产品列表。例如，我有这个列表：p1 p2 p3 p4 p5 p6。当我添加一个新产品时，它会显示p1 p2 p3 p4 p5 p6 p1 p2 p3 p4 p5 p6 p7。 - Aymen Kanzari

Answer 1

只需调用该函数即可

$(document).ready(function() {
  $('#validProduct').on("click", function(e) {
     ......
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : "./addProduct",
        data : JSON.stringify(product),
        dataType : 'json',
        timeout : 6000,
        success : function(data) {
         listProducts();//just recall the function here
        }
    });
  });
});

- CumminUp07

---

当我这样做时，它不会重新加载，而是再次显示产品列表。例如，我有这个列表：p1 p2 p3 p4 p5 p6。当我添加一个新产品时，它会显示p1 p2 p3 p4 p5 p6 p1 p2 p3 p4 p5 p6 p7。 - Aymen Kanzari

在重新加载之前清除它是否有可能，还是需要修改现有内容？ - CumminUp07

Answer 2

尝试这段代码...

$(document).ready(function() {
  $('#validProduct').on("click", function(e) {
    ......
    $.ajax({
      type: "POST",
      contentType: "application/json",
      url: "./addProduct",
      data: JSON.stringify(product),
      dataType: 'json',
      timeout: 6000,
      success: function(data) {
        //recall this function
        listProducts();
      }
    });
  });
});

- Moorthy

---

当我这样做时，它不会重新加载，而是再次显示产品列表。例如，我有这个列表： p1 p2 p3 p4 p5 p6当我添加一个新产品时，它会显示： p1 p2 p3 p4 p5 p6 p1 p2 p3 p4 p5 p6 p7 - Aymen Kanzari

Answer 3

在ajax函数成功调用时使用window.location.replace("your lising product url");。

我修改了你的jquery代码，希望这样能为你解决问题。

$(document).ready(function() {
  $('#validProduct').on("click", function(e) {
     ......
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : "./addProduct",
        data : JSON.stringify(product),
        dataType : 'json',
        timeout : 6000,
        success : function(data) {
         /* **reload listProducts** */
            window.location.replace("your lising product url");
        }
    });
  });
});

- Sachin Jaiswal