首先我們拿到的了一坨Json數(shù)據(jù)

如下

?

然后通過ajax請(qǐng)求拿到數(shù)據(jù)

在ajax的success方法中處理和使用數(shù)據(jù)：

其中包括：

用eval處理這種數(shù)據(jù)

var outStr = eval('(' data.data ')');

用循環(huán)取出數(shù)據(jù)并使用

$.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("調(diào)用成功"); console.log(data.statusCode);
//拿到數(shù)據(jù)后用eval函數(shù)處理 var outStr = eval('(' data.data ')');
//循環(huán)取出數(shù)據(jù)，并拼接 $.each(outStr,function(index){ var sexStr = "";
//數(shù)據(jù)庫(kù)中的數(shù)據(jù)1是男 0是女 outStr[index].sex == 1?sexStr = "Male":sexStr = "FeMale"; if(outStr[index].username!=localStorage.getItem("username")){ //需要拼接的內(nèi)容 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){} });
}

?最后我的頁面中能顯示

?

?

?

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的ajax请求拿到多条数据拼接显示在页面中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。