バックグラウンド環境

java、html、css、js、jquery、bootstrap、layui、maven、servlet、jsp の基礎を学び、Spring の学習を始めたばかりで、制御の反転と依存性注入を理解した後、フロントエンドプロジェクトを開発してみました。フロントエンドとバックエンドの相互作用の主なプロセスを明確にするために、春に統合してシンプルなフロントエンドとバックエンドの相互作用を実現します。

プロジェクト構造

プロジェクトのプロジェクト構造を作成する

主なプロジェクト構造

ジャワ

com.sisyphus

vo

ResultInfo // データによってカプセル化されたオブジェクト

LoginServlet //リクエストを処理するためのバックエンドコード

ウェブアプリ

html //ストレージページ

login.jsp

js //jquery

layui //フロントエンドプロジェクトページ

index.jsp //ホームページ

プロジェクトの構造を紹介した後、プロジェクトの簡単な説明を行い、メインコードを示します。

フロントエンドプロジェクトのフォームをコピーすることで、テキスト型の入力、パスワード型の入力、ボタン型のボタンを含むフォームを作成し、onclick属性を介して関数を呼び出し、ユーザーが入力したデータを取得し、要件を満たしていることを確認し、確認後に ajax リクエストを送信し、指定されたバックグラウンド 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 を取得します。クリックして観察します。そのアドレスは、html の下の userlogin であることがわかり
get404
ますここに画像の説明を挿入
。 war パッケージです。明らかに、このパスは間違っています。注釈で @WebServlet("/userlogin") のみをマークしました。したがって、get404 の理由は、ajax リクエストが間違ったパスに移動したためであると考えることができます。

明らかに、ajax が URL を探すとき、独自のディレクトリの html を事前にステッチします。

解決策 1

解決策 2

.../return ルートパスを ajax リクエストの URL の前に追加して、フロントエンドリクエストパスと一致させます。

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

これまでのところ、問題は十分に解決されています。

Get request エラー 404 の原因と解決策

ajax times 404でリクエストを取得

バックグラウンド環境

プロジェクト構造

問題の原因

解決策 1

解決策 2

おすすめ