비동기식 및 동기식으로 양식을 제출하려면 Jquery 클릭 버튼

최근 jsp 학생 정보 관리 시스템을 개발 중인데, 이제 막 jsp를 접하게 되어서 많은 문제에 봉착하게 되었는데, 녹화해서 공유해보겠습니다.

서블릿 예제에 대한 Jquery ajax 제출 양식

프론트 엔드 부분 코드:

    <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 코드 블록 뒤에 경고() 문을 추가했는데 기적이 일어났습니다. 브라우저에 해당 내용이 팝업되고 myeclipse 콘솔에 "123456789"라는 문자열이 인쇄되었습니다. 많은 블로그 공식 문서를 살펴본 후 모든 것이 JQuery ajax의 동기 및 비동기 제출 이유라는 것을 깨달았습니다.
먼저 JQuery ajax 방식을 이해해보자:

비동기의 이해: ajax 부분까지 코드가 실행될 때, ajax 이후에 사용할 외부 코드가 있으면 함께 실행된다. 이때 ajax의 반환 값은 ajax의 async 속성이 true(즉, 현재 ajax는 비동기임)이면 후속 외부 코드에서는 ajax의 반환 값을 얻는 것이 불가능하게 설정될 수만 있습니다. 즉, ajax의 async 속성이 true인 경우에만 ajax 부분이 실행되고 이후 코드가 실행될 때 관계에 연속성이 있게 되며 이러한 방식으로 반환 값을 얻을 수 있습니다. .

그럼 async를 false로 설정했더니 정말 문제가 해결됐는데, 왜 경고문을 추가했는데도 비동기적으로도 이름과 문자열이 출력되는지 아직도 모르겠네요?
계속해서 정보를 확인하고 내 자신의 요약은 다음과 같습니다(모든 전문가의 조언을 환영합니다):

1. Async: true: 제출 버튼을 클릭하면 클릭 이벤트의 코드 문이 표시됩니다. 실행되고 ajax가 실행될 때 비동기식으로 실행되기 때문에 이후 명령문이 없기 때문에 후속 명령문의 실행을 차단하지 않으므로 클릭 실행을 완료하기 전에 ajax가 종료될 수 있습니다. 이벤트가 발생하여 이름과 문자열이 출력되지 않았습니다. ajax 뒤에 경고 문을 추가하면 여기에서 클릭 이벤트가 차단됩니다. 이때 ajax는 실행할 시간이 충분하므로 콘솔에서 이름과 문자열을 출력할 수 있습니다. 외부 클릭 이벤트를 제거하고 ajax를 직접 실행해 보았는데 이때 동기식, 비동기식 상관없이 이름과 문자열이 출력되는 것을 보니 제 추측이 맞네요.
2. async:false인 경우: submit 버튼을 클릭하면 click 이벤트에 있는 코드문도 실행됩니다. ajax가 실행되면 동기적으로 실행되기 때문에 계속하기 전에 ajax가 성공적으로 반환될 때까지 기다려야 합니다. 다음 코드를 실행하면 당연히 이름과 문자열이 인쇄될 수 있습니다.