無法使用Jquery進行Ajax調用

Question

我試圖在Jquery ajax的幫助下進行登錄，但是在使用帶有Servlet（Java）的jQuery.ajax（....）方法進行ajax調用時，該方法無法調用。 我正在使用http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js鏈接中的ajax lib。

每次我在瀏覽器的地址欄中獲取以下URL時。

Project /？email = abc88％40gmail.com＆password = 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

如果將data屬性設置為對象，則jQuery將自動為您處理參數化和URI編碼。 如果您堅持要使用字符串，則需要自己完成所有操作。

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

#email安全考慮，我不會簡單地檢查#email和#password字段是否具有值屬性並返回true，也不會通過網絡傳輸純文本登錄信息。 也許您打算將其作為樣板代碼來使工作正常進行，然后您將對其進行更好的驗證/加密。 :)