我有一个 div,其中包含从 Mysql 中提取的客户端列表。
在同一页面上,我有一个弹出的 jquery 对话框,允许用户添加新客户端。
我想要发生的是,当用户添加新客户端时,包含列表的列表会重新加载,以便新客户端可用。
有没有办法在不使用 Load() 函数的情况下简单地重新加载 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
});
这些中的任何一个都应该给你带来成功。
success: function(userinfos) {
$("#users").append($('<tr><td>'+userinfos+'</td></tr>'))
display_message("user added");
}
$.ajax({
type: "GET",
url: "ht.tp://127.0.0.1:8000/result/?age="+ ageData +"&occasion="+
occasionData +"&relationship="+ forData +"#",
success: function (response) {
$("#testDIV").html(response);
}
});