JS 、后端接口暴露 模板
结构(手动创建)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ed78533620020219ac2a160e44ef9ffd.png#pic_center)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery Ajax Demo </title>
<style>
.box span{
display: inline-block;
min-width: 100px;
margin-right: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class = "box"></div>
<script src = "lib/baidu_jquery2.js"> </script>
<script src = "js/index.js"> </script>
</body>
</html>
index.js
(function($){
var DN = "http://localhost:8080"
function ajaxCall(varUrl,varType,data,callback){
$.ajax({
url:`${DN}${varUrl}`,
type:varType,
contentType:"application/x-www-form-urlencoded",
data:data,
dataType:"json",
success:function(rst){
if(callback && typeof(callback)=="function"){
callback(rst)
}
},
error:function(e){
console.error(e)
},
async:true
})
}
ajaxCall("/user/top10.do","GET",{},function(rst){
if(rst.code == 200){
var arr =[]
rst.t.forEach(e => {
arr.push(`<div>
<span>${e.user_id}</span>
<span>${e.user_name}</span>
<span>${e.user_gender}</span>
<span>${e.user_phone}</span>
</div>`)
});
$(".box").html(arr.join(""))
}else{
console.log("请求失败")
}
})
})(jQuery)
前后端交互的主流格式
前端:讲json对象转化成json格式【字符串】 => 后端:通过【工具】将json格式字符串解析成Java对象
后端:讲java对象转化成json格式【字符串】 => 前端:通过【工具】将json格式子串串解析成json对象