Ajax asynchronous submission, the browser always jumps out of the download Interface

Problem:

When I write a webpage's "User Login" section, I want to upload the user name and password to the backend for verification. I want to use the Ajax asynchronous submission function on the front end

The user name and password are uploaded to the backend, And the backend returns the verification result. However, after Ajax is written, the download window is displayed every time the page is refreshed.

The data format transmitted by Ajax is incorrect, causing the browser to mistakenly think that the data sent from the background is the downloaded content (so I guess), so

I tried it again in XML, txt, jaon, and other formats, but still did not solve the problem. After turning to this post, I realized that:

Http://www.jb51.net/article/32540.htm. let's take a look at my code first:

Below is some of my front-end Ajax code:

$(document).ready(function(){  $("#id_login").click(function(){    if($("#userName").val() == ""){       $("#msgbox").html("Sorry, Empty Username.").addClass(‘myinfo‘).fadeTo(900,1,function(){});       return false;    }        if($("#passWord").val() == ""){       $("#msgbox").html("Sorry, Empty PassWord.").addClass(‘myinfo‘).fadeTo(900,1,function(){});       return false;    }    $.ajax({       url: ‘kzkj_check.jsp‘,       async:false,        data: ‘un=‘+ $(‘#userName‘).val() +‘&pw=‘ + $(‘#passWord‘).val(),       type: "get",       success: function(msg){          if(msg.toString().trim() != "ERROR") //TRUE,return username;Message Sent, check and redirect          {                                    // and direct to the success page             //alert("name true "+msg.toString().trim()+"==");             $("#msgbox").html(‘Login Verified, Logging in.....‘).addClass(‘myinfo‘).fadeTo(900,1,               function()               {                   document.location=‘kzkj_login.jsp?user=‘+msg;               });          }          else          {             //alert("name false "+msg.toString().trim()+"==");             $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox             {                $(this).html(‘Sorry, Wrong Username Or Password.‘).removeClass().addClass(‘myerror‘).fadeTo(900,1);             });          }        },        error:function (err) {             alert("ajax err:"+ err);       }     });   });

 

The "login" control code is as follows:

<Input type = submit name = login value = logon id = id_login>

 

Here is a problem: When you click the control, the submit (the code above) is triggered, and Ajax asynchronous transmission is also triggered. So who triggers it first and how does the two work in the middle?

According to the meaning of the post (http://www.jb51.net/article/32540.htm), first trigger Ajax asynchronous transmission, because it is asynchronous transmission, the background to send data after waiting for the front-end return

The data is intermittently executed and the page is refreshed. As a result, Ajax does not receive the data.

 

The problem is that if Ajax does not receive the data, it should execute:

        error:function (err) {             alert("ajax err:"+ err);       }

Why does the front-end receive a download prompt?

Anyway, after I delete the submit, everything works normally. If you have any details, please kindly advise.

 

Another solution:

Another reason is that I am using asynchronous submission. When the verification is successful, the button submission event has been executed, so the page has been refreshed and changed to synchronous submission, the button submission event must be determined after Ajax verification is completed to solve this problem!