無法使用JQuery的Ajax調用

Question

我想用Jquery ajax幫助登錄，但在使用方法jQuery.ajax（....）與servlet（Java）進行ajax調用時，此方法無法使用打電話。我從鏈接http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js使用ajax lib。

每次我在瀏覽器的地址欄中獲得下面的URL。

項目/？電子郵件= abc88％40gmail.com &密碼= 1234 & sendbtn =發送+留言

下面是Jquery的Ajax代碼。

$(document).ready(function() { 
    //global vars  
    var username=jQuery("#email"); 
    var password=jQuery("#password"); 
    function checkLoginForm() { 
     if(username.attr("value") && password.attr("value")) { 
      return true; 
     } else { 
      return false; 
     }    
    } 
    jQuery(".txtbar, .txtbox").live("focus", function() { 
     var thelabel = jQuery(this).prev(); 
     var infobox = jQuery(this).next(); 
     var rowbox = jQuery(this).parent(); 
     var currid = jQuery(this).attr('id'); 
     var pxlchange = '-45px'; 
     rowbox.addClass('colors'); 

     thelabel.animate({left: pxlchange}, 350, 'linear', function() {}); 
     // The animation is completed 
     infobox.animate({opacity: 1.0}, 350, 'linear', function() { 
      // The animation is completed 
     }); 
    } 

    jQuery(this).live("keyup", function() { 
     var theval = jQuery(this).val(); 
     var limitval = 3; 
     var replacehtml = "";  
     var emailinfohtml = "Enter a valid e-mail address."; 
     var subjectinfohtml = "Enter Password."; 
     if(currid == "email") { 
      replacehtml = emailinfohtml; 
     } else if(currid == "password") { 
      replacehtml = subjectinfohtml; 
      limitval = 2; 
     } 

     // checking against e-mail regex 
     if(currid == "email") { 
      if(checkValidEmailAddress(theval)) { 
       infobox.html("Looks good!"); 
       infobox.addClass('good'); 
      } else if(!checkValidEmailAddress(theval)) { 
       infobox.html(replacehtml); 
       infobox.removeClass('good'); 
      } 
     } else { 
      // we use this logic to check for name+message fields 
      if(theval.length >= limitval) { 
      infobox.html("Looks good!"); 
       infobox.addClass('good'); 
      } else if(theval.length < limitval) { 
       infobox.html(replacehtml); 
       infobox.removeClass('good'); 
      } 
     } 
     // now we check if we can display the send button 
     // much easier to just look for 'good class on the req fields 
    }); 
}); 

jQuery(".txtbar, .txtbox").live("blur", function() { 
    var thelabel = jQuery(this).prev(); 
    var infobox = jQuery(this).next(); 
    var rowbox = jQuery(this).parent(); 
    var currid = jQuery(this).attr('id'); 

    rowbox.removeClass('colors'); 

    infobox.animate({opacity: 0}, 400, 'linear', function() { 
     // The animation is completed 
    }); 
}); 

jQuery("#sendbtn").click(function() {   
    if (checkLoginForm()) { 
     jQuery.ajax({ 
      type : "GET", 
      url : "/DoLogin.htm",data:"userName="+  username.val()+ "&password="+ password.val(), 
      success : function(msg) { 
       alert("Ajax Return Success"); 
       return false; 
      } 
     }); 
    } else { 
     alert("Ajax Return Fail Code "); 
     return false; 
    } 
}); 

function checkValidEmailAddress(emailAddress) { 
    var pattern = new RegExp(/^(("[\w-+\s]+")|([\w-+]+(?:\.[\w-+]+)*)|("[\w-+\s]+") ([\w-+]+(?:\.[\w-+]+)*))(@((?:[\w-+]+\.)*\w[\w-+]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][\d]\.|1[\d]{2}\.|[\d]{1,2}\.))((25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\.){2}(25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\]?$)/i); 
    return pattern.test(emailAddress); 
}; 

HTML代碼：

<div id="wrap"> 
    <form id="contact-form" name="contact-form"> 
     <div class="rowbox"> 
      <label for="email">E-mail</label> 
      <input type="email" id="email" name="email" class="txtbar req" tabindex="1"> 
       <div class="infobox"> 
        Enter a valid e-mail address 
       </div> 
      </div> 

      <div class="rowbox"> 
       <label for="subject">Password</label> 
       <input type="password" id="password" name="password" class="txtbar" tabindex="1"> 
       <div class="infobox"> 
        Enter Password 
       </div> 
      </div> 
     <input type="submit" value="Send Message" id="sendbtn" name="sendbtn" class="submit-button"> 
    </form> 
</div> 

Answer 1

如果您的數據屬性的對象，jQuery將處理參數化和URI編碼，它會自動爲您。如果你堅持這是一個字符串，你需要自己做所有的事情。

jQuery.ajax({ 
    type: "GET", 
    url: "/DoLogin.htm", 
    data: { userName: username.val(), password: password.val() }, 
    success: function() { 
    alert("Ajax Return Success"); 
    } 
}); 

在一個安全提示，我不會簡單地檢查#email和#password領域具有價值屬性，並返回true，我也不會在傳輸線純文本的登錄信息。也許你打算用這個樣板代碼來讓事情有效，並且稍後你會對它們進行驗證/加密。 :)