无法使用 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。

Project/?email=abc88%40gmail.com&password=1234&sendbtn=Send+Message

下面是 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，我也不会通过网络传输纯文本登录信息。也许您打算将其用作样板代码以使事情正常进行，稍后您将更好地验证/加密它们。 :)