码迷,mamicode.com
首页 > Web开发 > 详细

MUI-AJAX的使用总结

时间:2020-06-15 17:58:11      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:要求   流程图   type   produces   出现   有意思   www   编写   timeout   

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登录请求示例

MUI-AJAX的使用总结

标签:要求   流程图   type   produces   出现   有意思   www   编写   timeout   

原文地址:https://www.cnblogs.com/andtenet/p/13131990.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!