如何使用jquery在html上显示ajax列表响应

Question

所以我目前有一个搜索框，用户可以在其中搜索经理。当搜索并选择经理时，他们可以选择通过一个按钮显示直接下属员工，该按钮触发Javascript函数，该函数将Ajax帖子发送到后端以查询数据库。收到成功响应后，我想显示一个包含员工一般信息的表(如名字、姓氏、职位等(。我们以前曾使用Jquery在加载时提取数据，但我想知道是否有一种方法可以从Ajax响应中提取并显示这些数据，并在页面上显示，而无需刷新？另一个障碍似乎是，这种回应是以列表的方式进行的，因此它对许多员工没有回报；可变的响应。如果它更有效，我们也在使用百里香模板，但如果我能让百里香选择器打开以进行实时更新，比如这个，我就不会出现了

Answer 1

为了在HTML页面中设置Ajax响应，请执行以下操作：-

1.(使用HTML元素的id，然后附加ajax成功函数的响应。

假设有一个文本框，您想在其中设置响应

<input type="text" id="inputText" >

2.(现在，在ajax成功响应中，获取该元素的id，然后像这样附加响应：--

$.ajax({
url: //your url,
success(data){
$('#inputText').val(""); //clear the text box on each call so that it won't append the data on every request
$('#inputText').val(data); //get the text-box id and append the response
},
error(data){
console.log(JSON.stringify(data));
}
});

Answer 2

请先看我的评论。如果可能的话，post响应应该是一个JSON对象列表，我假设是雇员。然后在成功之后，使用jquery来操作(添加或删除(表行，如果这听起来很复杂的话。将整个表放在一个id为的div中，当ajax返回时，通过用新表替换所有所述的div HTML来重新创建表。无需刷新。然而，由于请求可能需要很长时间或失败，您需要一些动画(可能是blockUI(来显示活动，甚至处理失败