AJAX中Get请求报错404的原因以及解决办法

 更新时间:2023年03月30日 09:29:32   作者:sisyphus.K  
刚学习一门技术时总会踩一些坑,下面这篇文章主要给大家介绍了关于AJAX中Get请求报错404的原因及解决办法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

背景环境

已学习java基础,html,css,js,jquery,bootstrap,layui,maven,servlet和jsp,刚进入spring的学习,了解了控制反转和依赖注入后,自己尝试将一个使用layui开发的前端项目,整合到spring中实现前后端简单的交互,借此来理清前后端交互的主要流程。

项目结构

主要项目结构

  • java
    • com.sisyphus
      • vo
        • ResultInfo //数据封装成的对象
        • LoginServlet //处理请求的后端代码
  • webapp
    • html //存放页面
      • login.jsp
    • js //jquery
    • layui //前端项目页面
    • index.jsp //首页

在介绍完项目的结构之后,对项目做一个简单的说明,并展示主要代码:

通过拷贝了前端项目的一个表单,表单中包含一个text类型的input,一个password类型的input,还有一个button类型的按钮,通过onclick属性调用函数,取到用户输入的数据并进行校验,满足校验后发送ajax请求,将data返回指定的后台url。

function login(){
        //获取数据
        var username = $("#username").val();
        var password = $("#password").val();
        console.log(username)
        console.log(password)
        //校验参数
        if(isEmpty(username)){
            $("#sp").html("用户名不能为空");
            return;
        }

        if(isEmpty(password)){
            $("#sp").html("密码不能为空");
            return;
        }

        //发送请求
        $.ajax({
            type:'get',
            /*url:'../userlogin',*/
            url:'userlogin',
            data:{
                username:username,
                password:password
            },
            dataType:'json',
            success:function(data){
                if(data.code == 1){ //操作成功
                    //跳转
                    console.log(data);
                    alert("登录成功")
                    window.location.href = "../index.jsp";
                }else{ //操作失败
                    console.log(data);
                    $("#sp").html(data.msg);
                }
            }
        });

    }

    //非空校验
    function isEmpty(str){
        if(str == undefined || str.trim() == ""){
            return true;
        }
        return false;
    }

在后台中创建返回值类型对象,接收数据并进行校验检查,最后转换成相应的数据类型进行响应,写出给前台。

response.setContentType("application/json;charset=UTF-8");

        //创建一个返回值对象
        ResultInfo resultInfo = new ResultInfo();
        resultInfo.setCode(1);

        //接收参数
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username+"----"+password);

        //参数校验
        if(username == null || "".equals(username.trim())){
            resultInfo.setCode(0);
            resultInfo.setMsg("账号不存在");
        }
        if(password == null || "".equals(password.trim())){
            resultInfo.setCode(0);
            resultInfo.setMsg("账号不存在");
        }

        if(!"zhangsan".equals(username)){
            resultInfo.setCode(0);
            resultInfo.setMsg("用户不存在");

        }
        if("zhangsan".equals(username)&&!"123456".equals(password)){

            resultInfo.setCode(0);
            resultInfo.setMsg("密码有误");
        }


        //将数据转换成json格式的数据
        String ri = JSON.toJSONString(resultInfo);

        //写出json数据
        response.getWriter().write(ri);

问题成因

在第一次运行项目时,我的login.jsp在html目录中,而在Java代码中的注解如下:

@WebServlet("/userlogin")

在jsp文件的ajax请求中url标识将请求前台的地址,按照当前的注解我们会出现get404:

我们点进去观察:

发现它的地址是war包下的html下的userlogin,很明显这个路径是不对的,我们在注解中只标记了@WebServlet(“/userlogin”)。于是我们可以认为出现get404的原因是ajax请求到错误的路径。

很明显ajax在寻找url时预先拼接上了自己所在的目录html。

解决办法1

将login.jsp放在webapp根目录下,但是显然当我们项目的页面越来越多之后,都放在根目录下很不合适,于是我推荐采取第二种办法:

解决办法2

在ajax请求的url前加上…/返回根路径进行前端请求路径的匹配:

        //发送请求
        $.ajax({
            type:'get',
            url:'../userlogin',
            /*url:'userlogin',*/
            data:{
                username:username,
                password:password
            },
            dataType:'json',

至此问题圆满解决。

总结

到此这篇关于AJAX中Get请求报错404的原因以及解决办法的文章就介绍到这了,更多相关AJAX Get请求报错404内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Java视频格式转化的实现方法

    Java视频格式转化的实现方法

    这篇文章主要为大家详细介绍了Java视频格式转化的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02
  • idea打包java程序(包含依赖的所有jar包)

    idea打包java程序(包含依赖的所有jar包)

    这篇文章主要介绍了idea打包java程序(包含依赖的所有jar包),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • java实现163邮箱发送邮件到qq邮箱成功案例

    java实现163邮箱发送邮件到qq邮箱成功案例

    这篇文章主要为大家分享了java实现163邮箱发送邮件到qq邮箱成功案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • mybatis逆向工程与分页在springboot中的应用及遇到坑

    mybatis逆向工程与分页在springboot中的应用及遇到坑

    最近在项目中应用到springboot与mybatis,在进行整合过程中遇到一些坑,在此将其整理出来,分享到脚本之家平台供大家参考下
    2018-09-09
  • Java 中的伪共享详解及解决方案

    Java 中的伪共享详解及解决方案

    这篇文章主要介绍了Java 中的伪共享详解及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JavaGUI使用标签与按钮方法详解

    JavaGUI使用标签与按钮方法详解

    这篇文章主要介绍了JavaGUI使用标签与按钮方法,前段时间学了GUI,总体上概念还是有点模糊,于是决定花点时间简单整理下。先简单介绍一下GUI,GUI就是图形用户界面
    2023-03-03
  • 使用Spring处理x-www-form-urlencoded方式

    使用Spring处理x-www-form-urlencoded方式

    这篇文章主要介绍了使用Spring处理x-www-form-urlencoded方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-11-11
  • Json 自定义使用函数的简单实例

    Json 自定义使用函数的简单实例

    下面小编就为大家带来一篇Json 自定义使用函数的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 详解Mybatis的二级缓存配置

    详解Mybatis的二级缓存配置

    这篇文章主要介绍了Mybatis的二级缓存配置的相关资料,需要的朋友可以参考下
    2017-05-05
  • 基于Spring p标签和c标签注入方式

    基于Spring p标签和c标签注入方式

    这篇文章主要介绍了Spring p标签和c标签注入方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-09-09

最新评论