MUI-AJAX的使用总结
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
列出参考文献、参考博客（标题、作者、链接）。
