Javascript 无法使用Jquery调用Ajax

我正试图借助jQueryAjax进行登录，但在使用Jquery.ajax（..）和servlet（Java）方法调用ajax时，该方法无法调用。我正在使用链接中的ajax库

每次我在浏览器的地址栏中看到下面的URL

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

下面是jQueryAjax代码

$(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);
};

$（文档）.ready（函数（）{
//全局变量
var username=jQuery（“电子邮件”）；
var password=jQuery（“密码”）；
函数checkLoginForm（）{
if（username.attr（“value”）和password.attr（“value”））{
返回true；
}否则{
返回false；
}             
}
jQuery（“.txtbar，.txtbox”）.live（“焦点”，函数（）{
var thelabel=jQuery（this.prev（）；
var infobox=jQuery（this.next（）；
var rowbox=jQuery（this.parent（）；
var currid=jQuery（this.attr（'id'）；
变量pxlchange='-45px'；
rowbox.addClass（'colors'）；
动画（{left:pxlchange}，350，'linear'，function（）{}）；
//动画完成了
动画（{opacity:1.0}，350，'linear'，function（）{
//动画完成了
});
}
jQuery（this.live（“keyup”，function（））{
var theval=jQuery（this.val（）；
var limitval=3；
var replacehtml=“”；
var emailinfohtml=“输入有效的电子邮件地址。”；
var subjectinfo html=“输入密码。”；
如果（currid==“电子邮件”）{
replacehtml=emailinfohtml；
}else if（currid==“密码”）{
replacehtml=主题信息html；
limitval=2；
} 
//检查电子邮件正则表达式
如果（currid==“电子邮件”）{
如果（检查有效地址（theval））{
html（“看起来不错！”）；
infobox.addClass（'good'）；
}如果（！checkValidEmailAddress（theval））为else{
html（replacethtml）；
infobox.removeClass（'good'）；
}
}否则{
//我们使用此逻辑检查名称+消息字段
如果（theval.length>=limitval）{
html（“看起来不错！”）；
infobox.addClass（'good'）；
}否则如果（值长度<限制值）{
html（replacethtml）；
infobox.removeClass（'good'）；
}
}
//现在我们检查是否可以显示发送按钮
//在req字段中查找“好类”要容易得多
});
});
jQuery（“.txtbar，.txtbox”）.live（“模糊”，函数（）{
var thelabel=jQuery（this.prev（）；
var infobox=jQuery（this.next（）；
var rowbox=jQuery（this.parent（）；
var currid=jQuery（this.attr（'id'）；
rowbox.removeClass（'colors'）；
动画（{opacity:0}，400，'linear'，function（）{
//动画完成了
});
});
jQuery（“#sendbtn”）。单击（函数（）{
if（checkLoginForm（））{
jQuery.ajax({
键入：“获取”，
url:“/DoLogin.htm”，数据：“userName=“+userName.val（）+”&password=“+password.val（），
成功：功能（msg）{
警报（“Ajax返回成功”）；
返回false；
}
});
}否则{
警报（“Ajax返回失败代码”）；
返回false；
}
});
功能检查有效性电子邮件地址（电子邮件地址）{
（3）w-++以下以下（以下：：：：：：：：：：：：：：...[[[w-+[[[w-++[[[w-+[[[w-++））））））））））第十二（12）号（以下：：：：：：：：：：：：：（（（“[[[[[\w-+\w-++\\10++++以下以下以下以下以下以下）））））））））））））））一（（：：：：：：：：：：：：：：：：：：：：：：：：（（（（（（（（（（（（（（（）（）（）（）（）（）（）（（（（（（（（（（（（（（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（：：：：：：：：：：：：：：：：：：：：：：：：：：(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}.][\d][\d]{1,2}.}.$）/i）；
返回模式.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>

电子邮件
输入有效的电子邮件地址
密码
输入密码

如果将数据属性设置为对象，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，也不会通过网络传输纯文本登录信息。也许您打算将其作为样板代码来工作，稍后您会更好地验证/加密它们。

Hi Brett，谢谢你的建议，我已经改变了相应的代码，但这一次也不工作。此外，提交的数据正在浏览器上翻转……您所说的“翻转”是什么意思？我很好奇，您的DoLogin.htm页面中有什么？这里表单数据在浏览器地址栏中被翻转…DoLogin.htm是一个java servlet，它接收参数并处理请求和响应。在执行GET请求时，数据将始终附加到地址栏。这是正常的行为。也许你打算写一篇文章？