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){

}
});
}

 最后我的頁面中能顯示