AJAX中Get請(qǐng)求報(bào)錯(cuò)404的原因以及解決辦法

更新時(shí)間：2023年03月30日 09:29:32 作者：sisyphus.K

剛學(xué)習(xí)一門(mén)技術(shù)時(shí)總會(huì)踩一些坑,下面這篇文章主要給大家介紹了關(guān)于AJAX中Get請(qǐng)求報(bào)錯(cuò)404的原因及解決辦法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

背景環(huán)境

已學(xué)習(xí)java基礎(chǔ)，html，css，js，jquery，bootstrap，layui，maven，servlet和jsp，剛進(jìn)入spring的學(xué)習(xí)，了解了控制反轉(zhuǎn)和依賴(lài)注入后，自己嘗試將一個(gè)使用layui開(kāi)發(fā)的前端項(xiàng)目，整合到spring中實(shí)現(xiàn)前后端簡(jiǎn)單的交互，借此來(lái)理清前后端交互的主要流程。

項(xiàng)目結(jié)構(gòu)

主要項(xiàng)目結(jié)構(gòu)

java
com.sisyphus
vo
ResultInfo //數(shù)據(jù)封裝成的對(duì)象
LoginServlet //處理請(qǐng)求的后端代碼
webapp
html //存放頁(yè)面
login.jsp
js //jquery
layui //前端項(xiàng)目頁(yè)面
index.jsp //首頁(yè)

在介紹完項(xiàng)目的結(jié)構(gòu)之后，對(duì)項(xiàng)目做一個(gè)簡(jiǎn)單的說(shuō)明，并展示主要代碼：

通過(guò)拷貝了前端項(xiàng)目的一個(gè)表單，表單中包含一個(gè)text類(lèi)型的input，一個(gè)password類(lèi)型的input，還有一個(gè)button類(lèi)型的按鈕，通過(guò)onclick屬性調(diào)用函數(shù)，取到用戶(hù)輸入的數(shù)據(jù)并進(jìn)行校驗(yàn)，滿(mǎn)足校驗(yàn)后發(fā)送ajax請(qǐng)求，將data返回指定的后臺(tái)url。

function login(){
        //獲取數(shù)據(jù)
        var username = $("#username").val();
        var password = $("#password").val();
        console.log(username)
        console.log(password)
        //校驗(yàn)參數(shù)
        if(isEmpty(username)){
            $("#sp").html("用戶(hù)名不能為空");
            return;
        }

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

        //發(fā)送請(qǐng)求
        $.ajax({
            type:'get',
            /*url:'../userlogin',*/
            url:'userlogin',
            data:{
                username:username,
                password:password
            },
            dataType:'json',
            success:function(data){
                if(data.code == 1){ //操作成功
                    //跳轉(zhuǎn)
                    console.log(data);
                    alert("登錄成功")
                    window.location.href = "../index.jsp";
                }else{ //操作失敗
                    console.log(data);
                    $("#sp").html(data.msg);
                }
            }
        });

    }

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

在后臺(tái)中創(chuàng)建返回值類(lèi)型對(duì)象，接收數(shù)據(jù)并進(jìn)行校驗(yàn)檢查，最后轉(zhuǎn)換成相應(yīng)的數(shù)據(jù)類(lèi)型進(jìn)行響應(yīng)，寫(xiě)出給前臺(tái)。

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

        //創(chuàng)建一個(gè)返回值對(duì)象
        ResultInfo resultInfo = new ResultInfo();
        resultInfo.setCode(1);

        //接收參數(shù)
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username+"----"+password);

        //參數(shù)校驗(yàn)
        if(username == null || "".equals(username.trim())){
            resultInfo.setCode(0);
            resultInfo.setMsg("賬號(hào)不存在");
        }
        if(password == null || "".equals(password.trim())){
            resultInfo.setCode(0);
            resultInfo.setMsg("賬號(hào)不存在");
        }

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

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

            resultInfo.setCode(0);
            resultInfo.setMsg("密碼有誤");
        }


        //將數(shù)據(jù)轉(zhuǎn)換成json格式的數(shù)據(jù)
        String ri = JSON.toJSONString(resultInfo);

        //寫(xiě)出json數(shù)據(jù)
        response.getWriter().write(ri);

問(wèn)題成因

在第一次運(yùn)行項(xiàng)目時(shí)，我的login.jsp在html目錄中，而在Java代碼中的注解如下：

@WebServlet("/userlogin")

在jsp文件的ajax請(qǐng)求中url標(biāo)識(shí)將請(qǐng)求前臺(tái)的地址，按照當(dāng)前的注解我們會(huì)出現(xiàn)get404：

我們點(diǎn)進(jìn)去觀察：

發(fā)現(xiàn)它的地址是war包下的html下的userlogin，很明顯這個(gè)路徑是不對(duì)的，我們?cè)谧⒔庵兄粯?biāo)記了@WebServlet(“/userlogin”)。于是我們可以認(rèn)為出現(xiàn)get404的原因是ajax請(qǐng)求到錯(cuò)誤的路徑。

很明顯ajax在尋找url時(shí)預(yù)先拼接上了自己所在的目錄html。

解決辦法1

將login.jsp放在webapp根目錄下，但是顯然當(dāng)我們項(xiàng)目的頁(yè)面越來(lái)越多之后，都放在根目錄下很不合適，于是我推薦采取第二種辦法：

解決辦法2

在ajax請(qǐng)求的url前加上…/返回根路徑進(jìn)行前端請(qǐng)求路徑的匹配：

        //發(fā)送請(qǐng)求
        $.ajax({
            type:'get',
            url:'../userlogin',
            /*url:'userlogin',*/
            data:{
                username:username,
                password:password
            },
            dataType:'json',

至此問(wèn)題圓滿(mǎn)解決。

總結(jié)

到此這篇關(guān)于AJAX中Get請(qǐng)求報(bào)錯(cuò)404的原因以及解決辦法的文章就介紹到這了,更多相關(guān)AJAX Get請(qǐng)求報(bào)錯(cuò)404內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: