无法使用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，我也不会在传输线纯文本的登录信息。也许你打算用这个样板代码来让事情有效，并且稍后你会对它们进行验证/加密。 :)