Recently I am developing a jsp student information management system. Since I have just come into contact with jsp, I have encountered many problems, so I will record it and share it with you.

Jquery ajax submission form to servlet example

Front-end part code:

    <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 submission form code:

    //增加學生，異步提交學生表單
    $("#addStudents").click(function() {
        $.ajax({
            url: "addStudents.do",//要請求的服務器url 
            //這是一個對象，表示請求的參數(shù)，兩個參數(shù)：method=ajax&val=xxx，服務器可以通過request.getParameter()來獲取 
            //data:{method:"ajaxTest",val:value},  
            data: {
                name: $("#name").val(),
                studentId: $("#studentId").val(),
            },
            async: true,   //是否為異步請求
            cache: false,  //是否緩存結(jié)果
            type: "POST", //請求方式為POST
            dataType: "json",   //服務器返回的數(shù)據(jù)是什么類型 
            success: function(result){  //這個方法會在服務器執(zhí)行成功是被調(diào)用 ，參數(shù)result就是服務器返回的值(現(xiàn)在是json類型) 
                if(result){
                    alert("true");
                }else{
                    alert("false");
                }
            }
          });
    });

web.xml configuration code:

  <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 code (using POST submission method):

    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 Submit the form

After passing the above configuration, I entered the student's name and submitted the form, but the name and the string "123456789" were not printed in the myeclipse console, and then I started crazy checking and checked n times , I still don’t know where the error occurred. By chance, I discovered the problem. I added an alert() statement after the ajax code block, and a miracle happened. The browser popped up the corresponding content, and the name and string "123456789" were printed in the console of myeclipse. This made me very confused. After consulting a lot of blogs After going to the official documentation, I realized that everything is the reason for JQuery ajax's synchronous and asynchronous submission.
First, let’s understand the JQuery ajax method:

Understanding of asynchronous: When the code is executed to the ajax part, it is executed together with the external code after ajax. If there is external code at this time that needs to use the return value in ajax, And the async attribute of ajax is true (that is, ajax is asynchronous at this time), then it is impossible for subsequent external code to get the return value of ajax. It can only be set to synchronization, that is, the async attribute of ajax is true, and when the ajax part is executed , and then when subsequent code is executed, continuity will occur in the relationship, so that the return value can be obtained.

Then I set async to false, and the problem was really solved, but I still don’t know why the name and string can be printed out even asynchronously after adding an alert statement?
Continue to check the information and my own summary is as follows (any experts are welcome to give advice):

1. When async: true: When the submit button is clicked, the code statement in the click event is executed. When ajax is executed, due to asynchronous execution, Therefore, it will not block the execution of the subsequent statements, because there are no subsequent statements, so it may be that the ajax ended before the click event had time to execute, so the name and string were not printed out. If you add an alert statement after ajax, the click event will be blocked here. At this time, ajax will have enough time to execute, so the console can print out the name and string. I tried to remove the outer click event and execute ajax directly. At this time, the name and string can be printed regardless of synchronous or asynchronous, which can prove my conjecture.
2. When async:false: When the submit button is clicked, the code statement in the click event will also be executed. When ajax is executed, since it is executed synchronously, you must wait for ajax to return successfully before continuing to execute the subsequent code. Naturally, Can print out names and strings.