前端动态加载(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,导致和前端页面代码对应不上。

猜你喜欢

转载自blog.csdn.net/qq_39015168/article/details/82817253