Javascript 重新加载具有相同内容的div

我有一个div，其中包含从Mysql中提取的客户端列表

在同一个页面上，我有一个jquery对话框，它会弹出，允许用户添加一个新的客户端

我想做的是，当用户添加一个新的客户端时，将重新加载包含该列表的客户端，以便新客户端可用

---

有没有一种方法可以在不使用Load（）函数的情况下重新加载div，因为当我重新声明填充列表的类时，这会导致错误？

当然。如果不看代码，这里的混乱表明您不理解“关注点分离”。将获取信息的过程与显示该信息的过程分开。当用户输入新信息时，将其添加到从服务器获得的javascript数组或信息对象中，并将其发送到服务器，以便在数据库中进行更新。然后使用更新的信息再次运行显示功能，以包括新信息。理想情况下，如果可能，显示过程将使用现有标记，而不是删除所有标记并重新创建所有标记以添加一个项目。理想情况下，您可以接受这个概念并对其进行扩展，以使其具有最佳的效率和组织性

下面是我的jsbin中的示例代码。请记住，这只是为了让你开始

var info = [1,2,3,4,5]; //this is what you got from your ajax call to the server

function render(element, info) {
  //this is a lazy system that recreates/replaces all the markup each time. I suggest doing this more efficiently, but that is work for you to do :)
  var frag = document.createDocumentFragment();
  var len = info.length;
  for (var i=0; i<len; ++i) {
    var p = document.createElement('p');
    p.textContent = info[i];
    frag.appendChild(p);
  }
  element.innerHTML = '';
  element.appendChild(frag);
}

var targetElem = document.getElementById('targetElem');

render(targetElem, info);

var addButton = document.getElementById('add');
var input = document.getElementById('infoInput');
addButton.addEventListener('click', function() {
  info.push(input.value); //update the information
  render(targetElem, info); //render the updated information
});

var info=[1,2,3,4,5]//这是您从对服务器的ajax调用中得到的
函数渲染（元素、信息）{
//这是一个懒惰的系统，每次都会重新创建/替换所有标记。我建议更有效地执行此操作，但这是您要做的工作：）
var frag=document.createDocumentFragment（）；
var len=信息长度；
对于（var i=0；i当然。如果不看代码，您在这里的困惑表明您不理解“关注点分离”。将获取信息的过程与显示信息的过程分开。当用户输入新信息时，将其添加到从服务器获取的javascript数组或信息对象中，并将其发送到服务器以在数据库中更新。然后使用更新的信息再次运行显示功能，以包括新信息。理想情况下，显示过程将尽可能使用现有的标记，而不是删除所有标记并重新创建所有标记以添加一个项目。理想情况下，您将采用此概念并对其进行扩展，以使其具有最佳的效率和组织性

这是我的jsbin中的示例代码。请记住这只是为了让您开始

var info = [1,2,3,4,5]; //this is what you got from your ajax call to the server

function render(element, info) {
  //this is a lazy system that recreates/replaces all the markup each time. I suggest doing this more efficiently, but that is work for you to do :)
  var frag = document.createDocumentFragment();
  var len = info.length;
  for (var i=0; i<len; ++i) {
    var p = document.createElement('p');
    p.textContent = info[i];
    frag.appendChild(p);
  }
  element.innerHTML = '';
  element.appendChild(frag);
}

var targetElem = document.getElementById('targetElem');

render(targetElem, info);

var addButton = document.getElementById('add');
var input = document.getElementById('infoInput');
addButton.addEventListener('click', function() {
  info.push(input.value); //update the information
  render(targetElem, info); //render the updated information
});

var info=[1,2,3,4,5]；//这是您从对服务器的ajax调用中得到的信息
函数渲染（元素、信息）{
//这是一个懒惰的系统，每次都会重新创建/替换所有标记。我建议更有效地执行此操作，但这是您要做的工作：）
var frag=document.createDocumentFragment（）；
var len=信息长度；
对于（var i=0；i这两种方法中的任何一种都会给你带来成功

success: function(userinfos) {
                 $("#users").append($('<tr><td>'+userinfos+'</td></tr>'))
                 display_message("user added");
               }

这两者中的任何一个都会给你带来成功

success: function(userinfos) {
                 $("#users").append($('<tr><td>'+userinfos+'</td></tr>'))
                 display_message("user added");
               }

是的，使用.load使用的底层$.ajax方法。但是，.load可能会更容易。请提供您已经尝试过的示例。是否必须将新客户端添加到数据库中？如果不需要，您可以使用jquery创建元素并将其附加到DOM。您是否从ajax请求中检索用户信息？是的，使用底层$.load使用的.ajax方法。但是，.load可能更容易。请提供您已经尝试过的示例。是否必须将新客户端添加到数据库？如果不需要，您可以使用jquery创建元素并将其附加到DOM。您是否从ajax请求中检索用户信息？