Невозможно использовать вызов Ajax с помощью JQuery

Question

Я пытаюсь выполнить логин с помощью Jquery ajax, но во время создания ajax-вызова с использованием метода jQuery.ajax (....) с сервлетом (Java) этот метод не смог звонить. Я использую ajax lib из ссылки http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js.

Каждый раз, когда я получаю адрес ниже в адресной строке браузера.

Project /? = Электронный 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 поля имеют атрибуты значение и возвращает истину, и я бы передавать открытым текстом данные входа на провод. Возможно, вы намеревались использовать это как шаблонный код, чтобы заставить все работать, и вы будете проверять/шифровать их лучше позже. :)