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 文件中是设置了编码过滤器的,但是估计这个编码过滤器 ...
随机推荐
- 几个网络模型的示例代码(BlockingModel、OverlappedModel、WSAEventSelect、CompletionRoutine)..c++
作者的blog:猪)的网络编程世界 几个网络模型的示例代码代码包括了下面几个模型的示例:BlockingModel(阻塞模式).OverlappedModel(基于事件的重叠I/O).WSAEvent ...
- webAPP meta 标签大全
1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...
- 三 Flask+ MySQL 数据库操作
一: __init__.py作用: __init__.py 文件的作用是将文件夹变为一个Python模块,Python 中的每个模块的包中,都有__init__.py 文件.通常__init__.py ...
- Java中的IO流(1)
字节流: //一个字节一个字节的读写 FileInputStream in=new FileInputStream("源文件"); FileOutputStream out=new ...
- 你所不知道的html5与html中的那些事(四)——文本标签
文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后 ...
- Linux系统下如何设置IP地址?
Linux系统下如何设置IP地址?我们可以通过命令设定IP的方法,不过此方法的前提条件是用户需root权限.在linux系统的 /etc/sysconfig/network-script/ifcfg- ...
- ubuntu12.04+virtualbox+winxp的关于摄像头无法使用,声音出不来的问题
前天在ubuntu上安装了个virtualbox的虚拟机.以前在windows下面是用的vmware.结果到了ubuntu下面折腾半天用不了,于是就装了个virtualbox,在virtualbox里 ...
- 安装VMware-tools出现initctl: Job failed to start
安装VMware-tools中出现: ******* Creating a new initrd boot image for the kernel.update-initramfs: Generat ...
- gridview把textbox的值修改还是旧值的解决方法
解决方法很简单,加上if(!IsPostBack) 就OK了,因为之前加载之前都会调用InitData(). protected void Page_Load(object sender, Event ...
- Spark 中的 checkpoint
为了实现容错,需要做checkpoint.以Streaming为例,checkpoint中有两种数据: 1. Metadata checkpointing:用于恢复driver端出错的情况.其中包含: ...