PART 1
技术概述,描述这个技术是做什么?学习该技术的原因,技术的难点在哪里。控制在50-100字内。
?? 主要是实现在MUI框架中前端和后端服务器之间数据的异步传输。学习该技术是为了实现前后端分离开发项目时的数据传输,难点在偶尔会出现ajax无效的情况、目前我还不知道解决的方法。
PART 2
技术详述,描述你是如何实现和使用该技术的,要求配合代码和流程图详细描述。可以再细分多个点,分开描述各个部分。
//前端代码
mui.ajax(‘……‘, {//省略号处为后端url
data: {
//根据后端代码需要传输的数据,data部分可以不存在
},
dataType: ‘json‘, //服务器返回json格式数据(也有其他格式)
type: ‘post‘, //HTTP请求类型(也有其他类型,如“get”)
timeout: 10000, //超时时间设置为10秒;
headers: {
‘Content-Type‘: ‘application/json;charset:utf-8‘
},
success: function(data) {
//服务器返回响应,根据响应结果,分析操作是否成功
if (data.status == 200) {
//显示成功信息
//编写成功连接后的操作
}
else{
app.showToast(data.msg, "error");
}
},
error: function(xhr, type, errorThrown) {
//异常处理;
console.log(type);
}
});
//后端代码(以登录功能为例
package ……;
import ……;
……
@Controller
public class LoginController {
@Autowired
protected HttpServletRequest request;
@Autowired
protected UserServiceImpl service;
@ResponseBody
@RequestMapping(value = "/user/login",method = RequestMethod.POST,produces = "application/json;charset=UTF-8")
public String login (@RequestBody User iuser, HttpSession session){
//data{……}
……
}
}
PART 3
技术使用中遇到的问题和解决过程。要求问题的描述和解决有一定的内容,不能草草概括。要让遇到相关问题的人看了你的博客之后能够解决该问题。
问题1:返回的数据为空,555错误
遇到这个情况,对我来说都是data中数据的层次、形式写错了,比如
//错误形式:
data: {
userId:user.userId,
postContent:content,
postImage:imgUrl
},
//正确形式:
data: {
user:{
userId:user.userId
},
postContent:content,
postImage:imgUrl
},
还有数据名拼写有误,比如
data:{
bottleid:12
//正确的拼写其实是“bottleId”
},
解决方法:查看后端代码进行修改,一般都会有备注;或者查看后端开发人员编写的文档,一般都会写好接口与数据形式;再不济直接询问后端开发人员。
问题2:方法不允许,405错误
基本就是HTTP请求类型错误,常见就是POST与GET
mui.ajax(‘……‘, {//省略号处为后端url
type: ‘post‘, //HTTP请求类型
……
});
解决方法:查看后端代码并改正。
@RequestMapping(value = "/user/login",method = RequestMethod.POST,produces = "application/json;charset=UTF-8")
问题3:一直有错误提示框弹出
出现这个问题基本就是超时时间设置过短
mui.ajax(‘……‘, {//省略号处为后端url
timeout: 10000, //超时时间设置为10秒;
……
});
解决方法:扩大超时时间,一般都是设置到10000,可能有点长,但宁长不短。
PART 4
进行总结。
?? 在我看来,mui.ajax的学习难度比较低但是很关键,因为你开发过程中肯定要使用到这个技术。我在使用过程中遇到的问题基本上就是上面那几个,都是比较好解决的问题。掌握了mui.ajax之后使用mui.post或mui.get就很轻松了,因为后面两个就是mui.ajax的简化。AJAX的使用还是很有意思的,配合postman使用效果更佳。
PART 5
列出参考文献、参考博客(标题、作者、链接)。