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

标签 javascript jquery html ajax thymeleaf

所以我目前有一个搜索框,用户可以搜索经理。当经理被搜索和选择时,他们可以选择通过一个按钮显示直接下属的员工,该按钮会触发一个 Javascript 函数,该函数将 Ajax 帖子发送到后端以查询数据库。收到成功响应后,我想显示一个包含员工一般信息(例如名字、姓氏、职位等)的表格。我们以前使用 Jquery 在加载时提取数据,但我想知道是否有是一种从 Ajax 响应中提取和显示此数据并将其显示在页面上而不刷新的方法吗?另一个障碍似乎是响应采用列表方式,因此它不会向许多员工返回任何内容;可变响应。如果它更有效,我们也使用 Thymeleaf 模板,但如果我可以让 Thymeleaf 选择器打开以进行实时更新,我不会出现,例如这个

最佳答案

为了在您的 HTML 页面中设置 Ajax 响应,请执行以下操作:-

1.) 使用您的 HTML 元素的 ID,然后附加来自您的 ajax Success 函数的响应。

假设有一个文本框,您要在其中设置响应。

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

2.) 现在,在您的 ajax success Response 中,获取此元素的 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));
       }
});

关于javascript - 如何使用 jquery 在 html 上显示 ajax 列表响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51444192/

相关文章:

javascript - 使用 JavaScript API 淡入淡出 Youtube 视频

android - 带有导航栏的标题内右对齐的 div 中断到另一行

php - jquery日历从mysql数据库中拉取信息

html - div 中的 div 获取父级的尺寸

javascript - 正则表达式 url 无法识别

javascript - Bootstrap 图标未显示在 Internet Explorer 中

javascript - Webpack - 在 Angular 2 中调用外部 JS

javascript - 支持动态饼图的图形/图表?

PHP - 下拉不显示 mysql 中的所有项目

android - 在某些手机中以整页显示的 Jquery 移动应用程序标题