ajax请求拿到多条数据拼接显示在页面中

首先我们拿到的了一坨Json数据

如下

然后通过ajax请求拿到数据

在ajax的success方法中处理和使用数据：

其中包括：

用eval处理这种数据

var outStr = eval('(' data.data ')');

用循环取出数据并使用

$.each(outStr,function(index){
console.log(outStr[index].username);
}

综上代码：

componentDidMount (){
var _this =this;
$.ajax({
async:false,
type:"POST",
url:"http://localhost:1111/api/Users/all",
dataType:"Json",
data:{
"username":"",
},
success:function(data){
console.log("调用成功");
console.log(data.statusCode);//拿到数据后用eval函数处理
var outStr = eval('(' data.data ')');//循环取出数据，并拼接
$.each(outStr,function(index){
var sexStr = "";//数据库中的数据1是男 0是女
outStr[index].sex == 1?sexStr = "Male":sexStr = "FeMale";
if(outStr[index].username!=localStorage.getItem("username")){
//需要拼接的内容
var htmlStr = '<div class = "userM_info">';
htmlStr  = ' <div class = "userM_infoBox">' outStr[index].name '</div>';
htmlStr  = ' <div class = "userM_infoBox">' sexStr '</div>';
htmlStr  = ' <div class = "userM_infoBox">' outStr[index].phoneNum '</div>';
htmlStr  = ' <div class = "userM_infoBox">' outStr[index].address '</div>';
htmlStr  = ' <div class = "userM_fork"></div>';
htmlStr  = ' </div>';
//拼接到需要的div中
$('.userM_content_data').append(htmlStr);}
})
},
error:function(err){}
});}

最后我的页面中能显示

更多专业前端知识，请上【猿2048】www.mk2048.com

ajax请求拿到多条数据拼接显示在页面中相关推荐

django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
通过Ajax获取数据并显示在表格中（原生Ajax，JQuery，Bootstrap，模板引擎）
需求页面上有一个"获取"按钮.当点击按钮时,从后端获取数据,并通过表格显示在页面上. 环境 Ubuntu 22.04 VSCode 1.67.2 jQuery v3.6.0 Bo ...
传输某条数据到另一个页面回填
开发工具与关键技术:VS中传输某条数据到另一个页面回填作者:木有窝的鸟~小通撰写时间:2019年5月25日在各种编程语言中,C#是其中的一门语言,而这一门语言能应用于软件编程,学习C#语言最主要 ...
通过ajax获取的数据怎怎么在html上,Ajax获取数据然后显示在页面的实现方法
主要功能流程介绍循环获取列表数据点击列表数据进入详情页点击报名参加弹出报名成功提示框点击提示框中的确定按钮,跳回列表页代码实现流程和解说 1.访问链接list.PHP时判断是pc端还是客户端 ...
ASP.NET Core应用针对静态文件请求的处理[5]: DefaultFilesMiddleware中间件如何显示默认页面...
DefaultFilesMiddleware中间件的目的在于将目标目录下的默认文件作为响应内容.我们知道,如果直接请求的就是这个默认文件,那么前面介绍的StaticFileMiddleware中间件会 ...
关于后端数据无法显示在页面上的问题
问题出现:数据无法显示在页面上的问题 ,jsp中EL表达式在前端页面里被视为文本内容而显示出来原因分析:可能是xml配置问题,不支持EL表达式 web.xml内容如下: <!DOCTYPE w ...
jQuery ajax请求成功且返回了数据，但是不进success:function()
2019独角兽企业重金招聘Python工程师标准>>> 1.状态码返回200--表明服务器正常响应了客户端的请求: 2.通过firebug和IE的httpWatcher可以看出服务器 ...
ajax请求后台传body格式数据，服务器@RequestBody需要注意实相符
ajax请求以body传输书写方式 $.ajax({type: "post",contentType:"application/json",dataType: ...
ajax请求怎么判断没有更多内容,怎么知道ajax 请求完了，想在数据没请求完时，页面有一个loading效果...
参考下 var loading = (function(){ var $loading = $('body').append(' var show = function(){ $loading.fad ...

ajax请求拿到多条数据拼接显示在页面中

ajax请求拿到多条数据拼接显示在页面中相关推荐

最新文章

热门文章