Get request error 404 causes and solutions

background environment

I have learned the basics of java, html, css, js, jquery, bootstrap, layui, maven, servlet and jsp, and just started learning spring. After understanding inversion of control and dependency injection, I tried to develop a front-end project using layui. Integrate into spring to achieve simple front-end and back-end interaction, so as to clarify the main process of front-end and back-end interaction.

project structure

main project structure

• java
  • com.sisyphus
    • vo
      • ResultInfo // object encapsulated by data
      • LoginServlet //Backend code for processing requests
• webapp
  • html //storage page
    • login.jsp
  • js //jquery
  • layui //Front-end project page
  • index.jsp //home page

After introducing the structure of the project, give a brief description of the project and show the main code:

1. By copying a form of the front-end project, the form contains an input of text type, an input of password type, and a button of button type. The function is called through the onclick attribute, and the data input by the user is obtained and verified to meet the requirements. Send an ajax request after verification, and return the data to the specified background 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;
    }

2. Create a return value type object in the background, receive the data and perform verification checks, and finally convert it into the corresponding data type to respond, and write it out to the front desk.

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);

Cause of the problem

When running the project for the first time, my login.jsp is in the html directory, and the annotations in the Java code are as follows:

@WebServlet("/userlogin")

In the ajax request of the jsp file, the url identifier will request the address of the foreground. According to the current annotation, we will get get404: we

click in and observe:
it is found that its address is userlogin under the html under the war package. Obviously, this path is wrong. , we only marked @WebServlet("/userlogin") in the annotation. So we can think that the reason for get404 is that the ajax request goes to the wrong path.

Obviously, when ajax is looking for the url, it pre-stitches the html of its own directory.

Solution 1

Put login.jsp in the root directory of the webapp, but obviously when there are more and more pages in our project, it is not appropriate to put them in the root directory, so I recommend the second method:

Solution 2

Add .../return root path before the url of the ajax request to match the front-end request path:

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

So far the problem has been satisfactorily resolved.