ajax的常出现的问题以及解决方案

导读:本篇文章讲解 ajax的常出现的问题以及解决方案,文章出自:https://blog.csdn.net/weixin_43316702/article/details/105877973希望对大家有帮助,欢迎收藏,转发!站点地址:www.javazhiyin.com.com

>>强大,10k+点赞的 SpringBoot 后台管理系统竟然出了详细教程!

ajax是java网页编程中常会使用到的方法,它可以不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
现在就来说一下个人总结的ajax可能出现的问题和解决方法:


第一种情况:请求失败(常见的情况)
这种情况多数都是因为url路径的问题,导致后台无法获得ajax请求,这个的话写对路径就可以解决;
还有可能就是路径正确可是后端接受的参数对不上,导致请求失败,没法得到需要的参数,所以要检查参数是否一致;
如果是出现Uncaught ReferenceError: $ is not defined报错,那么就是就是没有导入query库jquery.min.js文件,也可能路径错误,且需要将query库的引用放到第一个


第二种情况:请求成功,但跳转error
这种情况在我写项目时也经常会遇到,这类情况的话,可能是后台的方法是void类型的,这个的话就需要将ajax的dataType改为text;
还有一种可能就是数据写错了,例如json数据格式错误,返回时也是会跳转到error。


第三种情况:ajax上传文件不成功
利用ajax上传文件,一般都会采用js的formData,这时需要设置processData和contentType为false,附上图片
在这里插入图片描述


讲一下个人的使用心得:
ajax一般常用于检验某信息是否存在,或者是在进行数据修改以及数据回显。
在检验方面的话是比较常见的,账号注册时用户名是否使用呀,都是通过ajax校验后台数据库中是否存在,返回某个数据判断条件后在页面上显出对应的文字说明;
在进行数据修改以及数据回显的方面的话也是对后台数据库进行处理,然后传回页面需要的数据进行,不过在一些文件上传时,上传完后返回文件名称,有时候含有一些特殊符号没法进行识别;
最后附上一个ajax回显修改图片的代码:

function returnHead() {
        var formData = new FormData();
        var file = $('#uploadhead')[0].files[0];
        formData.append("upload",file);
        var head = document.getElementById("imghead");
        var hi = document.getElementById("hi");
        $.ajax({
            url:"${pageContext.request.contextPath}/user/returnHead.do",
            async:true,
            processData: false,   // jQuery不要去处理发送的数据
            contentType: false,   // jQuery不要去设置Content-Type请求头
            type:"POST",
            data: formData,
            success:function (data) {
                head.src="${pageContext.request.contextPath}/"+data;
                hi.innerHTML = data;
            },
            error:function () {
                alert("更新失败");
            },
            dataType:"text"
        });
    }

感谢学习,共同进步哟O(∩_∩)O哈哈~