前端动态加载(ajax接口连接后台数据,将后台数据返回到前端页面)。
前端页面:
js代码:
var httpurl = “http://60.205.179.111:8080” ;//访问电脑的路径
$(function () {
debugger;
var obj = {
} ;
$.ajax({
url: httpurl + '/queryOverProject1',//要连接的接口
type: 'POST',
dataType: 'json',
contentType: "application/json",
async: false,
data: JSON.stringify(obj),
xhrFields: {
withCredentials: true
},
success: function (result) {
console.log(result)
if (result.code == "200") {
pageInfo = result.data;
console.log(pageInfo);
// console.log(type);
// setPageInfo();
setPageInfo(pageInfo);
} else {
alert("错误码;" + result.code + " 错误信息:" + result.message);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log('XMLHttpRequest:');
console.log(XMLHttpRequest);
alert('网络异常!尝试刷新网页解决问题')
}
});
});
function setPageInfo(result) {
var text = "";
text += '<div id="Img" style="float: left">'
text += '<img "/></div>'
text +='<div>'
text +=' <h2 id="name">'+result[0].projectCategory+'</h2>'
text +=' <span id="address">'+result[0].projectCategory+'</span>'
text +=' <span id="jobException">'+result[0].projectCategory+'</span> '
text +=' <span id="sex">'+result[0].projectCategory+'</span>'
text +=' <span id="yearsOld">'+result[0].projectCategory+'</span>'
text +=' <span id="jobCondition">'+result[0].projectCategory+'</span>'
text +='<br/>'
text +='<span id="email">'+result[0].projectCategory+'</span>'
text +='<span id="phone">'+result[0].projectCategory+'</span>'
text +=' </div>'
console.log(text)
console.log( $('#All'))
$('#All').append(text);
}
心得:本人做这个的时候犯了一个小错误,把All写成了ALL,导致和前端页面代码对应不上。