前后端交互之ajax篇
前后端交互之"门户"技术
·
前后端交互
一.交互过程
1.用户访问页面，页面触发事件创建XHR对象，进行ajax请求;
2.请求访问服务器端，请求被web中间件拦截并进行处理
3.由控制层框架springmvc中的controller进行接收，controller请求业务层spring框架的service服务，service请求持久层mybatis框架的mapper映射，mapper访问数据库。操作完数据库，返回结果，mybatis封装成java对象传回service，service把java对象传回controller，controller把java对象又转换为json字符串，然后传回浏览器
4.浏览器传回给调用者XHR，XHR调用回调方法callback，callback进行json字符串的解析，从中拿到要展现的数据，通过javascript处理，最终回显到页面上。
二.jQuery实现ajax:
$().ready(function(){//
$.ajax({
type: "POST",
url: "https://p.3.cn/prices/mgets",
contentType: "application/json;charset=utf-8",
data: { //拼接的参数
"skuIds": "J_100003717483"
},
dataType: "jsonp",
success: function(data) { //返回的结果 //[{"cbf":"0","id":"J_100003717483","m":"10000.00","op":"2499.00","p":"2099.00"}]
$('#rtnData').text("返回数据：" + JSON.stringify(data));
$('#itemId').text("商品编号：" + data[0].id);
$('#itemPrice').html("商品价格： " + data[0].p);
},
error: function(data) {
alert("提交失败" + JSON.stringify(data));
}
});
三.vue-axios实现ajax:
3.1Get/Delete方式提交
方式一:直接拼接参数
axios.get("http://localhost:8090/getUserById?id=1")
.then(function(result){
console.log(result.data)
})
方式二:使用params包装多个参数
axios.get("http://localhost:8090/getUserById",{
params: {
id: 1
}
}).then(function(result){
console.log(result.data)
})
方式三:使用restFul风格
axios.get("http://localhost:8090/user/1")
.then( result => {
console.log("AAAA")
console.log(result.data)
})
3.2Post/Put方式提交
方式一:以json串提交,后端需要注解@RequestBody接收参数
<body>
<script src="js/axios.js"></script>
<script>
//以json串格式传给后端
let url = "http://localhost:8090/addUser";
axios.post(url,{
name: '小白',
age: 18,
sex: '男'
}).then((result) =>{
console.log("插入成功")
})
</script>
</body>
方式二:以key-value字符串方式提交,后端可以通过对象直接接收
<body>
<script src="js/axios.js"></script>
<script>
//key-value字符串形式传给后端
let url = "http://localhost:8090/addUser";
let params = new URLSearchParams();
params.append("name","小红")
params.append("age",19)
params.append("sex","女")
axios.post(url,params).then((result) => {
console.log("插入成功")
})
</script>
</body>
方式三:restFul风格,后端需要拼接参数
<!--前端代码:-->
<body>
<script src="js/axios.js"></script>
<script>
const url = "http://localhost:8090/addUser/小黑/18/男"
axios.post(url).then((result)=>{
console.log("新增成功")
})
</script>
</body>
//后端代码
@PostMapping("/addUser/{name}/{age}/{sex}")
public String addUser( User user) {
userService.addUser(user);
return "添加成功";
}
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)