jquery get和post 請求 渲染資料
阿新 • • 發佈：2019-02-01
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./index.css">
<title>jquery請求資料 渲染頁面</title>
</head>
<body>
<div class="box" id="box">
<div class="ceshi">
測試
</div>
<div class="title">
我是標題
</div>
<!--需要迴圈的資料-->
<ul class="ul-box" id="ulBox">
<!--<li class="li-con">-->
<!--<span class="number">2015672662</span>-->
<!--<span class="content">-->
<!--<span class="gray-tit">前面</span> 後面內容-->
<!--</span>-->
<!--<span class="content con2">-->
<!--<span class="gray-tit">前面</span> 後面內容-->
<!--</span>-->
<!--<!–圖片–>-->
<!--<div class="image">-->
<!--<img src="" alt="">-->
<!--</div>-->
<!--</li>-->
</ul>
<div class="ceshi2">
測試
</div>
<ul class="ul-box" id="ulBox2">
<!--<li class="li-con">-->
<!--<span class="number">2015672662</span>-->
<!--<span class="content">-->
<!--<span class="gray-tit">前面</span> 後面內容-->
<!--</span>-->
<!--<span class="content con2">-->
<!--<span class="gray-tit">前面</span> 後面內容-->
<!--</span>-->
<!--<!–圖片–>-->
<!--<div class="image">-->
<!--<img src="" alt="">-->
<!--</div>-->
<!--</li>-->
</ul>
</div>
<!--引進jquery-->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
var arr=[{'a':'aaa','amy':'amy1'},{'a':'bbb','amy':'amy2'},{'a':'ccc','amy':'amy3'}];
var html1='';
// 原生js方法
// for (var key in arr) {
// html1 +='<div>'+arr[key].a+'</div>' +
// '<div>'+arr[key].amy+'</div>'
// }
// each方法
$.each(arr, function (i, n) {
html1 +='<div>'+n.a+'</div>' +
'<div>'+n.amy+'</div>'
});
// $('.ceshi').html(html1);
$('.ceshi').append(html1);
// 傳送get請求，獲取資料
// https://www.easy-mock.com/mock/5b868ff26c5beb191441278b/example/getList
$.ajax({
type: "get",
dataType: "Json",
url: "https://www.easy-mock.com/mock/5b868ff26c5beb191441278b/example/getList",
start: function () { alert("開始獲取資料了") },
complete: function () { alert("獲取完了") },
success: function (data) {
var t = eval(data); //強制轉換一下json字串，生成json物件;
var data = t.data;
$('.title').html(data.title)
var rows = t.data.rows
console.log(rows);
var html = '';
$.each(rows,function (i,item) {
html+=' <li class="li-con">\n' +
' <span class="number">'+item.number+'</span>\n' +
' <span class="content">\n' +
' <span class="gray-tit">'+item.before+'</span> '+item.after+'\n' +
' </span>\n' +
' <span class="content con2">\n' +
' <span class="gray-tit">'+item.before1+'</span> '+item.after1+'\n' +
' </span>\n' +
' <!--圖片-->\n' +
' <div class="image">\n' +
' index:'+i+' <img src="" alt="">\n' +
' </div>\n' +
' </li>';
})
var oContent = $('#ulBox');
// oContent.html(html);
oContent.append(html);
}
});
//傳送post請求，獲取資料
$.ajax({
url : 'https://www.easy-mock.com/mock/5b868ff26c5beb191441278b/example/postList/:id',
data:{id:1},
cache : false,
async : true,//非同步請求
type : "POST",
dataType : 'Json',
success : function (res){
console.log('成功');
var t = eval(res); //強制轉換一下json字串，生成json物件;
console.log(t.data);
}
});
});
</script>
</body>
</html>參考圖片：
