JS語句將後臺獲取資料在頁面展示方法原始碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/y-style.css" />
<title></title>
<script>
window.onload = function() {
var designWidth = 750,
rem2px = 40;
document.documentElement.style.fontSize = ((window.innerWidth / designWidth) * rem2px) + 'px';
}
</script>
<style type="text/css">
.imgs {
width: 15px;
height: 15px;
}
</style>
</head>
<body>
<!--<div class="header">
<a class='arrow-left' href="javascript:;"></a>
<h1>正文</h1>
</div>-->
<div class="comments_list_li">
<div class="comments_list_photo">
<img id="d14_photo" src="" />
</div>
<div class="comments_list_txt">
<div>
<div class="d14_userName" id="d14_userName"></div>
<span style="margin-right: 0.5rem;" id="d14-day"></span>
<span style="margin-right: 1.7rem;" id="d14-time"></span>
</div>
</div>
</div>
<div class="margin-l-15 margin-r-15"><h2 style="font-weight:bold;" id="d14_title"></h2></div>
<div style="clear: both;"></div>
<div class="d14-neirong margin-l-15 margin-r-15" style="margin-top:12px"></div>
<div style="margin-top:15px">
<ul class="d36_pic margin-l-15" id="imgUrlBar">
<!-- <li><img class="d14_pics" src="" /></li>
<li><img class="d14_pics" src="" /></li>
<li><img class="d14_pics" src="" /></li> -->
</ul>
</div>
<div style="clear: both;"></div>
<div style="margin-top:" class="margin-l-15 margin-r-15">
<img class="imgs" id="" src="img/d36_zan.png" /><a style="margin-left:2%" id="d14_likes"> </a>
<img style="margin-left:6%" class="imgs" id="" src="img/d36_cai.png" /><a style="margin-left:2%" id="d14_dislikes"></a>
<img style="margin-left:6%" class="imgs" id="" src="img/d36_read.png" /><a style="margin-left:2%" id="d14_readNum"></a>
</div>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 獲取url引數
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
}
var articleId = GetQueryString('articleId');
var userId = GetQueryString('userId');
//論壇詳情
$.get('http://www.zhihuiyungang.com/m/propleLife/article/get', {articleId:articleId, userId:userId}, function(data) {
//論壇發帖者頭像
if (data.retData.userPhoto != undefined && data.retData.userPhoto != null && data.retData.userPhoto.length != 0) {
$('#d14_photo').attr('src', data.retData.userPhoto);//'http://www.zhihuiyungang.com' +
}else{
$('#d14_photo').attr('src', 'img/d36_touxiang.png');//'http://www.zhihuiyungang.com' +
}
$('#d14_userName').text(data.retData.userName);
var day = data.retData.createDate;
$('#d14-day').text(day.substring(0, 11));
$('#d14-time').text(day.substring(11, 19));
$('#d14_title').text(data.retData.title);
var content = (data.retData.content).replace(/\n/g, '<br/>');
$(".d14-neirong").html(content);
$('#d14_likes').text(data.retData.likes);
$('#d14_dislikes').text(data.retData.dislikes);
$('#d14_readNum').text(data.retData.readNum);
//論壇圖片
if (data.retData.imageUrl.length != 0) {
var imgUrls = (data.retData.imageUrl).split(",");
var imgUrlHtml='';
for(var i = 0 ; i < imgUrls.length; i++){
imgUrlHtml += '<li><img class="d14_pics" src="' + imgUrls[i] + '"></li>';
}
$('#imgUrlBar').html(imgUrlHtml);
}
}, 'json');
</script>
</body>
</html>
//介面說明
get:/m/propleLife/article/get
*string:userId#使用者 ID
*string:articleId#評論 ID
<<<
success
{
"errNum": "0",
"retData": {
"id":"",#文章 id
"userPhoto": "/upload/shequ_707m9zVm94851fyS80.crop_phot
o.jpg",
"imageUrl": "jpg", #論壇圖片
"userName": "chulain",
"title": "cu chulainn",#標題
"userId": "2e9fe592e21e4a36961d29c570185149",#發帖人 id
"content": "i deep to",#內容
"createDate": "10-17 16:29"，
"isCollect":1 # 收藏；0：未收藏
"shareHtml":"/surveyList/d36_share.html "#分享 拼接參
數 articleId：論壇 id,userId:使用者 id
"likes": 0,#點贊數
"dislikes": 0,#點踩數
"readNum": 1，閱讀量
"likeStatus": "0", #點贊狀態：0 未點贊， 1 已點贊
"dislikeStatus": "0", #點踩狀態：0 未點踩， 1 已點踩
},
"message": "論壇資訊獲取成功",
"retMsg": "success"
}
<<<
error
{
"errNum":"0",
"retMsg":"error",
"retData":[],
"message":"論壇資訊獲取失敗"
}