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

最后我的页面中能显示

 

ajax请求拿到多条数据拼接显示在页面中的更多相关文章

  1. ajax请求、servlet返回json数据

    ajax请求.servlet返回json数据 1.方式一 response.setcontenttype("text/html;charset=utf-8"); response. ...

  2. ajax请求传过来的json数据直接转成对应的实体类时出错:400 Bad Request 不进入controller

    今天开发过程中,在SpringMVC中的Action中处理前台ajax请求传过来的json数据直接转成对应的实体类时出错:400 Bad Request,后台也不报错,400指的的是请求无效(请求有语 ...

  3. ASP.NET Core应用针对静态文件请求的处理[5]: DefaultFilesMiddleware中间件如何显示默认页面

    DefaultFilesMiddleware中间件的目的在于将目标目录下的默认文件作为响应内容.我们知道,如果直接请求的就是这个默认文件,那么前面介绍的StaticFileMiddleware中间件会 ...

  4. 关于解决JQuery发送Ajax请求后,IE缓存数据不更新的问题

    http://www.cnblogs.com/lys_013/archive/2013/08/07/3243435.html 今天在做ajax页面无刷新请求后台服务器数据的时候,IE下遭遇Ajax缓存 ...

  5. javaScript(拼写树形)+ajax请求,去后台查找数据

    第一步:页面加载完成时,利用jquery中的一函数,调用js方法,js方法,发送ajax请求,去后台查找父类权限集合,响应回来json格式的数据,对数据进行操作,往页面上添加内容 //页面初始化加载菜 ...

  6. GROUP_CONCAT()多条数据.拼接字符串 最大长度1024

    mysql cmd show variables like "group_concat_max_len"; concat  合并多条数据 成一个逗号分隔的字符串 查找mysql的配 ...

  7. $.when()方法监控ajax请求获取到的数据与普通ajax请求回调获取到的数据的不同

    1.$.when(ajax).done(function(data)}); 2.$.ajax().done(function(data){}); 1中的data被封装进一个对象[data, " ...

  8. 笔记-返回到前一个页面时显示前一个页面中ajax获取的数据

    笔记第一部分:http://www.cnblogs.com/zczhangcui/p/6869219.html 在第一部分遇到的问题是,用ajax获取了一系列列表信息后,拼接好html后插入到了原有页 ...

  9. 在springmvc框架中,通过ajax请求,响应至前端的中文显示是?

    今天遇到的一个问题,我通过ajax请求去访问控制器,然后通过控制器给我响应了一段json数据,但是里面的中文 在浏览上显示是??,我在web.xml 文件中是设置了编码过滤器的,但是估计这个编码过滤器 ...

随机推荐

  1. 47: error: undefined reference to `QWebView::QWebView(QWidget*)'

    QT  5.6版本 用Qt界面设计器打开界面文件,在界面上托入QWebView控件,这时运行会出现错误,错误如下: ......... undefined reference to `QWebView ...

  2. Word直接发表博客测试

    这是我现在使用的VSCode! 这是另一段测试内容!

  3. SpringBoot使用拦截器无效

    附上代码: public class WendaWebConfiguration extends WebMvcConfigurerAdapter { @Autowired PassportInterc ...

  4. Centos7.2 安装配置 Tengine(nginx)

    一.下载tengine wget http://tengine.taobao.org/download/tengine-2.2.2.tar.gz 二.安装tenginx(nginx)的模块依赖库 yu ...

  5. HTML5学习笔记(一)相关概率

    HTML5的设计目的是为了在移动设备上支持多媒体. 声明:<!DOCTYPE html> 注意:对于中文网页需要使用 <meta charset="utf-8"& ...

  6. SCUT - 205 - 饲养牛 - 最大流

    https://scut.online/p/205 连着做所以一开始就觉得是网络流. 这种至多分配几次的很有网络流的特征. 一开始想从食物和饮料流向牛,但是怎么搞都不对. 其实可以从s流向食物,食物流 ...

  7. The King’s Ups and Downs

    有n个高矮不同的士兵,现在要将他们按高,矮依次排列,问有多少种情况. 化简为 n个人,求出可以形成波浪形状的方法数 #include <iostream> #include <cma ...

  8. uva11400 Lighting System Design

    题目大意: 有一个照明系统需要用到n种灯,每种灯的电压为V,电源费用K,每个灯泡费用为C,需要该灯的数量为L.注意到,电压相同的灯泡只需要共享一个对应的电源即可,还有电压低的灯泡可以被电压高的灯泡替代 ...

  9. 洛谷P3750 [六省联考2017]分手是祝愿(期望dp)

    传送门 嗯……概率期望这东西太神了…… 先考虑一下最佳方案,肯定是从大到小亮的就灭(这个仔细想一想应该就能发现) 那么直接一遍枚举就能$O(nlogn)$把这个东西给搞出来 然后考虑期望dp,设$f[ ...

  10. 关于HTML5画布canvas的功能

    一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid ...