Home > php教程 > PHP开发 > body text

Jquery click button to submit form asynchronously and synchronously

高洛峰
Release: 2016-11-19 10:14:09
Original
1488 people have browsed it

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:

    
姓名 学号
Copy after login

ajax submission form code:

    //增加学生,异步提交学生表单
    $("#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");
                }
            }
          });
    });
Copy after login

web.xml configuration code:

  
    This is the description of my J2EE component
    This is the display name of my J2EE component
    addStudents
    org.cms.students.addStudents
  

  
    addStudents
    /addStudents.do
  
Copy after login

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");
    }
Copy after login

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.


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!