Klicken Sie auf die JQuery-Schaltfläche, um das Formular asynchron und synchron zu senden

Vor Kurzem entwickle ich ein JSP-Studenteninformationsmanagementsystem. Da ich gerade mit JSP in Kontakt gekommen bin, bin ich auf viele Probleme gestoßen, daher werde ich es aufzeichnen und mit Ihnen teilen.

Jquery-Ajax-Übermittlungsformular an Servlet-Beispiel

Front-End-Teilecode:

    <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-Übermittlungsformularcode:

    //增加学生，异步提交学生表单
    $("#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-Konfigurationscode:

  <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 (mit der POST-Übermittlungsmethode):

    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-Übermittlungsformular

Nachdem ich die obige Konfiguration übergeben habe, gebe ich ein Der Name des Studenten. Dann habe ich das Formular eingereicht, aber der Name und die Zeichenfolge „123456789“ wurden nicht in der Myeclipse-Konsole gedruckt. Dann habe ich verrückt nachgesehen und es n-mal überprüft, aber ich wusste immer noch nicht, wo der Fehler aufgetreten ist Zufall, ich habe das Problem gefunden. Ich habe nach dem Ajax-Codeblock eine Warnung () hinzugefügt, und der Browser hat den entsprechenden Inhalt angezeigt, und der Name und die Zeichenfolge „123456789“ wurden nach Rücksprache sehr verwirrt Viele Blogs Nachdem ich die offizielle Dokumentation gelesen hatte, wurde mir klar, dass alles der Grund für die synchrone und asynchrone Übermittlung von JQuery Ajax ist.
Lassen Sie uns zunächst die JQuery-Ajax-Methode verstehen:

Asynchrones Verständnis: Wenn der Code im Ajax-Teil ausgeführt wird, wird er zusammen mit dem externen Code nach Ajax ausgeführt Zu diesem Zeitpunkt ist der Rückgabewert in Ajax und das Async-Attribut von Ajax wahr (das heißt, Ajax ist zu diesem Zeitpunkt asynchron). Anschließend ist es für nachfolgenden externen Code unmöglich, den Rückgabewert von Ajax abzurufen. Er kann nur festgelegt werden Bei der Synchronisierung ist das Async-Attribut von Ajax wahr. Nur wenn der Ajax-Teil ausgeführt wird und dann der nachfolgende Code ausgeführt wird, besteht eine Kontinuität in der Beziehung, und auf diese Weise kann der Rückgabewert erhalten werden .

Dann habe ich async auf false gesetzt und das Problem wurde wirklich gelöst, aber ich weiß immer noch nicht, warum der Name und die Zeichenfolge nach dem Hinzufügen einer Alert-Anweisung auch asynchron ausgedruckt werden können?
Überprüfen Sie weiterhin die Informationen und meine eigene Zusammenfassung lautet wie folgt (begrüßen Sie alle Experten, die Ratschläge geben):

1. Async: true: Wenn auf die Schaltfläche „Senden“ geklickt wird, wird die Codeanweisung im Klickereignis angezeigt ausgeführt wird, und wenn Ajax ausgeführt wird, wird die Ausführung der nachfolgenden Anweisungen nicht blockiert, da es asynchron ausgeführt wird, da später keine Anweisungen vorhanden sind. Daher kann es sein, dass der Ajax beendet wurde, bevor er Zeit hatte, die Ausführung des Klicks abzuschließen Ereignis, daher wurden der Name und die Zeichenfolge nicht ausgedruckt. Wenn Sie nach Ajax eine Warnanweisung hinzufügen, wird das Klickereignis hier blockiert. Zu diesem Zeitpunkt hat Ajax genügend Zeit zur Ausführung, sodass die Konsole den Namen und die Zeichenfolge ausdrucken kann. Ich habe versucht, das äußere Klickereignis zu entfernen und Ajax direkt auszuführen. Zu diesem Zeitpunkt können der Name und die Zeichenfolge unabhängig davon gedruckt werden, ob sie synchron oder asynchron sind, was meine Vermutung beweisen kann.
2. Wenn async:false: Wenn auf die Schaltfläche „Senden“ geklickt wird, wird die Codeanweisung im Klickereignis ebenfalls ausgeführt. Da sie synchron ausgeführt wird, müssen Sie warten, bis Ajax erfolgreich zurückkehrt, bevor Sie fortfahren Um den folgenden Code auszuführen, können natürlich Namen und Zeichenfolgen ausgegeben werden.