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 文件中是设置了编码过滤器的,但是估计这个编码过滤器 ...
随机推荐
- noip2013提高组:积木大赛
题目描述 春春幼儿园举办了一年一度的“积木大赛”.今年比赛的内容是搭建一座宽度为n的大厦,大厦可以看成由n块宽度为1的积木组成,第n块积木的最终高度需要是hi. 在搭建开始之前,没有任何积木(可以看成 ...
- maven学习八 关于maven的version
在一个有继承关系的POM文件中,父项目中有如下定义: <dependencyManagement> <dependency> <groupId>com.type ...
- html中NAME和ID区别
html中NAME和ID区别 NAME 的最大作用就是可以与服务端进行交互.Struts2中要设NAME的属性才能在Action中取到值,ID取不到. id与name的作用,作为标签的标识符,基本上是 ...
- 在windows10环境下给PHPStorm配置xdebug断点调试功能
笔者的开发环境: wampserver2.5系统环境包 操作系统:windows10 64位专业版. php版本:php5.512 Apache版本:2.49 好了下面介绍,phpstorm配置xde ...
- SQL 分组获取产品 前两条记录
select * from ( select *, ROW_NUMBER() over(partition by IPAddress order by recordtime desc) as rowN ...
- 注册美国iTunes账号步骤(跳过绑定银行卡)
步骤: 将iTunes客户端升级到最新版本 注销当前登陆的用户,随便搜索一个免费的应用 点击下载,此时会弹框提示你登陆,点击下方注册超链 跳转到注册页面,同意各种条款,点击下一步 填写邮箱(最好用gm ...
- Working Experience - WPF 中 DataGrid 控件的应用
问题: 添加控件后, 编辑单元格会出现异常 绑定 ItemsSource 属性后, 更新绑定对象的数据, UI 不刷新 如何显示控件中 ComboBox 类型 解决方法: 绑定 ItemsSource ...
- Hyperledger Fabric 替换couchDB
fabric中默认数据存储的方式是levelDB,一个key/value存储的单机数据库.除此之外还提供了另外一种存储方式:couchDB.同样也是一个K/V 数据库,对fabric而言,相比于前者, ...
- Linux上安装Apache服务器
http://httpd.apache.org/download.cgi httpd-2.4.29.tar.gz #创建httpd用户 groupadd httpd useradd -g httpd ...
- jQuery EasyUI/TopJUI基本的数字输入框(保留两位小数,带前缀后缀...)
jQuery EasyUI/TopJUI基本的数字输入框(保留两位小数,带前缀后缀...) numberbox(数值输入框) HTML required:必填字段,默认为false:prompt:显示 ...