ajax请求拿到多条数据拼接显示在页面中-白红宇

ajax请求拿到多条数据拼接显示在页面中

阅读量：6160 次

发布时间：2019-06-21

本文共 1119 字，大约阅读时间需要 3 分钟。

首先我们拿到的了一坨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 = '
     
      ';htmlStr += ' 
      
       '+outStr[index].name+'
      
';htmlStr += ' 
      
       '+sexStr+'
      
';htmlStr += ' 
      
       '+outStr[index].phoneNum+'
      
';htmlStr += ' 
      
       '+outStr[index].address+'
      
';htmlStr += ' 
      
';htmlStr += ' 
     
';//拼接到需要的div中$('.userM_content_data').append(htmlStr);}})},error:function(err){}}); }