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){ }
});
}
最后我的页面中能显示
ajax请求拿到多条数据拼接显示在页面中的更多相关文章
- ajax请求、servlet返回json数据
ajax请求.servlet返回json数据 1.方式一 response.setcontenttype("text/html;charset=utf-8"); response. ...
- ajax请求传过来的json数据直接转成对应的实体类时出错:400 Bad Request 不进入controller
今天开发过程中,在SpringMVC中的Action中处理前台ajax请求传过来的json数据直接转成对应的实体类时出错:400 Bad Request,后台也不报错,400指的的是请求无效(请求有语 ...
- ASP.NET Core应用针对静态文件请求的处理[5]: DefaultFilesMiddleware中间件如何显示默认页面
DefaultFilesMiddleware中间件的目的在于将目标目录下的默认文件作为响应内容.我们知道,如果直接请求的就是这个默认文件,那么前面介绍的StaticFileMiddleware中间件会 ...
- 关于解决JQuery发送Ajax请求后,IE缓存数据不更新的问题
http://www.cnblogs.com/lys_013/archive/2013/08/07/3243435.html 今天在做ajax页面无刷新请求后台服务器数据的时候,IE下遭遇Ajax缓存 ...
- javaScript(拼写树形)+ajax请求,去后台查找数据
第一步:页面加载完成时,利用jquery中的一函数,调用js方法,js方法,发送ajax请求,去后台查找父类权限集合,响应回来json格式的数据,对数据进行操作,往页面上添加内容 //页面初始化加载菜 ...
- GROUP_CONCAT()多条数据.拼接字符串 最大长度1024
mysql cmd show variables like "group_concat_max_len"; concat 合并多条数据 成一个逗号分隔的字符串 查找mysql的配 ...
- $.when()方法监控ajax请求获取到的数据与普通ajax请求回调获取到的数据的不同
1.$.when(ajax).done(function(data)}); 2.$.ajax().done(function(data){}); 1中的data被封装进一个对象[data, " ...
- 笔记-返回到前一个页面时显示前一个页面中ajax获取的数据
笔记第一部分:http://www.cnblogs.com/zczhangcui/p/6869219.html 在第一部分遇到的问题是,用ajax获取了一系列列表信息后,拼接好html后插入到了原有页 ...
- 在springmvc框架中,通过ajax请求,响应至前端的中文显示是?
今天遇到的一个问题,我通过ajax请求去访问控制器,然后通过控制器给我响应了一段json数据,但是里面的中文 在浏览上显示是??,我在web.xml 文件中是设置了编码过滤器的,但是估计这个编码过滤器 ...
随机推荐
- 47: error: undefined reference to `QWebView::QWebView(QWidget*)'
QT 5.6版本 用Qt界面设计器打开界面文件,在界面上托入QWebView控件,这时运行会出现错误,错误如下: ......... undefined reference to `QWebView ...
- Word直接发表博客测试
这是我现在使用的VSCode! 这是另一段测试内容!
- SpringBoot使用拦截器无效
附上代码: public class WendaWebConfiguration extends WebMvcConfigurerAdapter { @Autowired PassportInterc ...
- Centos7.2 安装配置 Tengine(nginx)
一.下载tengine wget http://tengine.taobao.org/download/tengine-2.2.2.tar.gz 二.安装tenginx(nginx)的模块依赖库 yu ...
- HTML5学习笔记(一)相关概率
HTML5的设计目的是为了在移动设备上支持多媒体. 声明:<!DOCTYPE html> 注意:对于中文网页需要使用 <meta charset="utf-8"& ...
- SCUT - 205 - 饲养牛 - 最大流
https://scut.online/p/205 连着做所以一开始就觉得是网络流. 这种至多分配几次的很有网络流的特征. 一开始想从食物和饮料流向牛,但是怎么搞都不对. 其实可以从s流向食物,食物流 ...
- The King’s Ups and Downs
有n个高矮不同的士兵,现在要将他们按高,矮依次排列,问有多少种情况. 化简为 n个人,求出可以形成波浪形状的方法数 #include <iostream> #include <cma ...
- uva11400 Lighting System Design
题目大意: 有一个照明系统需要用到n种灯,每种灯的电压为V,电源费用K,每个灯泡费用为C,需要该灯的数量为L.注意到,电压相同的灯泡只需要共享一个对应的电源即可,还有电压低的灯泡可以被电压高的灯泡替代 ...
- 洛谷P3750 [六省联考2017]分手是祝愿(期望dp)
传送门 嗯……概率期望这东西太神了…… 先考虑一下最佳方案,肯定是从大到小亮的就灭(这个仔细想一想应该就能发现) 那么直接一遍枚举就能$O(nlogn)$把这个东西给搞出来 然后考虑期望dp,设$f[ ...
- 关于HTML5画布canvas的功能
一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid ...