AJAX非同步提交，瀏覽器總跳出下載介面

標籤：style   blog   http   color   get   資料   

問題：

    我在寫一個網頁的“使用者登入”部分時，要將使用者名稱和密碼傳到後端驗證，想在前端用了AJAX非同步提交功能，將

使用者名稱密碼傳到後端，然後後端返回驗證結果。但AJAX寫好後每次重新整理網頁都會跳出下載視窗，起初以為是

AJAX傳輸的資料格式出了問題，導致瀏覽器誤以為後台傳來的資料是下載內容（這麼猜測的），於是

換了xml，txt，jaon 等格式試了個遍，最後還是沒解決。後來翻到這篇文章，才明白：

http://www.jb51.net/article/32540.htm，我們先看看My Code：

   

下面是我前端AJAX部分代碼：

$(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);       }     });   });

 

“登入”控制項的代碼如下：

 <INPUT type=submit name=login  value=登入 id=id_login>                    

 

這裡有個問題：單擊控制項的時候觸發了submit（如上代碼），同時也觸發了AJAX非同步傳輸，那麼，究竟誰先觸發，中途二者怎麼工作？

根據文章的意思（http://www.jb51.net/article/32540.htm），先觸發AJAX非同步傳輸，由於是非同步傳輸，後台發送資料後在等待前台返回

資料間歇執行了submit，重新整理了頁面，導致AJAX沒收到資料。

 

問題是，AJAX沒收到資料應該執行：

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

這段代碼啊，前端為何會出現下載提示？

反正我刪除submit以後一切正常，有高人知道具體細節的請多多指教。

 

另外一個解決途徑：

還有一個原因是因為我用的是非同步提交，沒等驗證成功的時候已經執行了按鈕的提交事件，所以頁面已經重新整理，將其改成同步提交，按鈕的提交事件必須等ajax驗證結束後判斷是否進行提交就可以解決這個問題了！