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 文件中是设置了编码过滤器的,但是估计这个编码过滤器 ...
随机推荐
- C++之迭代器失效总结
1. 对于序列式容器(如vector,deque),序列式容器就是数组式容器,删除当前的iterator会使后面所有元素的iterator都失效.这是因为vetor,deque使用了连续分配的内存,删 ...
- poj3422K方格取数——最大费用最大流
题目:http://poj.org/problem?id=3422 最大费用最大流: 拆点,在自点之间连两条边,一条容量为1,边权为数字:一条容量为k-1,边权为0:表示可以走k次,只有一次能取到数字 ...
- Code:获取指定汉字的首字母
ylbtech-Code:获取指定汉字的首字母 1.获取指定汉字的首字母返回顶部 1. /// <summary> /// 获取指定汉字的首字母 /// </summary> ...
- May we can use Turbolinks or Pjax in our web apps
Turbolinks[1]: Turbolinks makes following links in your web application faster.Instead of letting th ...
- js 常用验证
邮箱验证: $(function () { $("#txt_Email").blur(function () { var ema ...
- 《Java多线程编程核心技术》读后感(十七)
使线程具有有序性 正常情况下,线程在运行时多个线程之间执行任务的时机时无序的.可以通过改造代码的方式使它们运行具有有序性 package Seven; public class MyThread ex ...
- ACM-ICPC2018北京网络赛 Tomb Raider(暴力)
题目2 : Tomb Raider 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 Lara Croft, the fiercely independent daughte ...
- html解决的兼容问题
手机版不缩放 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum ...
- ue4 svn备份目录
http://blog.csdn.net/sh15285118586/article/details/55737480 UE4工程文件备份目录有:Config.Content.Plugins.Sour ...
- 【转】mysql日期格式+日期增加天数
WHERE DATE_FORMAT(字段,'%m/%d')=DATE_FORMAT(DATE_ADD(SYSDATE(),INTERVAL 7 DAY),'%m/%d') 条件 数据库字段时间=当前时 ...