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

最新推荐文章于 2022-03-02 12:41:29 发布

前端老码农

最新推荐文章于 2022-03-02 12:41:29 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： react 学习笔记 ajax请求拿到多条数据拼接显示在页面中

原文链接：https://www.mk2048.com/blog/blog.php?id=hh112cibhaib&title=ajax%E8%AF%B7%E6%B1%82%E6%8B%BF%E5%88%B0%E5%A4%9A%E6%9D%A1%E6%95%B0%E6%8D%AE%E6%8B%BC%E6%8E%A5%E6%98%BE%E7%A4%BA%E5%9C%A8%E9%A1%B5%E9%9D%A2%E4%B8%AD

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

首先我们拿到的了一坨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){

}
});
}