JQueryボタンをクリックしてフォームを非同期および同期的に送信する

最近、jsp の学生情報管理システムを開発しています。jsp に出会ったばかりで、多くの問題に遭遇したので、記録して共有します。

サーブレットへの Ajax 送信フォームの JQuery の例

フロントエンド部分コード:

    <form class="addSud" method="post" action="">
        <table>
        <tr>
        <td class="textRight">姓名</td>
        <td colspan="2"><input type="text" id="name" name="name"></td>
        <td class="textRight">学号</td>
        <td colspan="2"><input type="text" id="studentId" name="studentId"></td>
        </tr>
        <tr>
            <td colspan="5">    <input type="submit" id="addStudents" value="提交"></td>
        </tr>
    </table>
    </form>

ajax 送信フォーム コード:

    //增加学生，异步提交学生表单
    $("#addStudents").click(function() {
        $.ajax({
            url: "addStudents.do",//要请求的服务器url 
            //这是一个对象，表示请求的参数，两个参数：method=ajax&val=xxx，服务器可以通过request.getParameter()来获取 
            //data:{method:"ajaxTest",val:value},  
            data: {
                name: $("#name").val(),
                studentId: $("#studentId").val(),
            },
            async: true,   //是否为异步请求
            cache: false,  //是否缓存结果
            type: "POST", //请求方式为POST
            dataType: "json",   //服务器返回的数据是什么类型 
            success: function(result){  //这个方法会在服务器执行成功是被调用 ，参数result就是服务器返回的值(现在是json类型) 
                if(result){
                    alert("true");
                }else{
                    alert("false");
                }
            }
          });
    });

web.xml 設定コード:

  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>addStudents</servlet-name>
    <servlet-class>org.cms.students.addStudents</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>addStudents</servlet-name>
    <url-pattern>/addStudents.do</url-pattern>
  </servlet-mapping>

addStudents.java コード (POST 送信メソッドを使用):

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String name=request.getParameter("name");
        System.out.println(name);
        System.out.println("123456789");
        out.print("false");
    }

ajax フォームを送信

上記の設定を通過した後、学生の名前を入力してフォームを送信しましたが、名前と文字列「123456789」が myeclipse コンソールに出力されず、その後、狂ったチェックを開始して n 回チェックしました, どこでエラーが発生したかはまだわかりませんが、偶然、問題を発見しました。 ajaxコードブロックの後にalert()ステートメントを追加すると、ブラウザに対応するコンテンツがポップアップ表示され、myeclipseのコンソールに名前と文字列が表示され、非常に混乱しました。たくさんのブログ 公式ドキュメントを読んだ後、すべてが JQuery ajax の同期および非同期送信の理由であることがわかりました。
まずは JQuery の ajax メソッドを理解しましょう:

非同期の理解: コードが ajax 部分まで実行されるとき、この時点で return を使用する必要がある外部コードがある場合、それは ajax の後の外部コードと一緒に実行されます。 ajax の値、および ajax の async 属性が true (つまり、この時点で ajax が非同期である) の場合、後続の外部コードは ajax の戻り値を取得することはできません。つまり、同期にのみ設定できます。 , ajaxのasync属性がtrueの場合、ajax部分が実行され、その後のコードが実行されると関係に連続性が生じて戻り値が得られます。

その後、asyncをfalseに設定し、問題は本当に解決しましたが、アラートステートメントを追加した後、非同期であっても名前と文字列が出力されるのはなぜですか？
引き続き情報を確認してください。私自身の要約は次のとおりです (専門家のアドバイスを歓迎します):

1. When async: true: 送信ボタンがクリックされると、クリック イベントのコード ステートメントが実行されます。 ajax は非同期実行により実行されます。したがって、後続のステートメントがないため、後続のステートメントの実行はブロックされません。クリック イベントを完了する前に ajax が終了した可能性があるため、名前と文字列は出力されませんでした。 ajax の後にアラート ステートメントを追加すると、クリック イベントはここでブロックされます。この時点で、ajax には実行するための十分な時間があり、コンソールは名前と文字列を出力できます。外側のクリックイベントを削除してajaxを直接実行してみたところ、同期・非同期問わず名前と文字列が出力でき、私の推測が証明できました。
2. async:false の場合: 送信ボタンがクリックされると、クリック イベント内のコード ステートメントも実行されます。ajax は同期的に実行されるため、実行を続行する前に ajax が正常に返されるまで待つ必要があります。当然、後続のコードは名前と文字列を出力できます。