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

列出参考文献、参考博客（标题、作者、链接）。

DCloud-MUI文档
AJAX登录请求示例