上一篇写的是用Ajax实现的一个登录验证程序，可以看到代码有些复杂。但是Java世界里从来就不缺少框架，Ajax也有不少优秀的框架，其中Prototype就是其中之一。通过Prototype可以轻松实现很多功能，关于Prototype请参见：http://www.prototypejs.org/
下面就用Prototype实现登录验证
1.页面
<form name="myform" action="login.do" method="post" onSubmit="return check()"> Name: <input type=text id="usr" name="usr"><br> Password: <input type=password id="pwd" name="pwd"><br> <input type=submit /> </form>
2.JavaScript
<script type="text/javascript" src="js/prototype.js"></script>
<scritp type="text/javascript">
function check() {
//获得用户输入的用户名和密码
var params = "usr=" + document.getElementById("usr").value + "&pwd=" + document.getElementById("pwd").value;
new Ajax.Request(
"login", //请求URL
{
method:'post',
parameters : params, //请求参数
onComplete: function(transport) { //设置回调函数
var data = transport.responseXML;
var flag = data.getElementsByTagName("flag")[0].firstChild.nodeValue;
if (flag == "false") {
alert('用户名或密码错误！请重新输入！');
} else {
window.open("ok", "_top");
}
}
});
return false;
}
//获得用户输入的用户名和密码 var params = "usr=" + document.getElementById("usr").value + "&pwd=" + document.getElementById("pwd").value; new Ajax.Request( "login", //请求URL {
method:'post', parameters : params, //请求参数 onComplete: function(transport) { //设置回调函数 var data = transport.responseXML; var flag = data.getElementsByTagName("flag")[0].firstChild.nodeValue; if (flag == "false") { alert('用户名或密码错误！请重新输入！'); } else { window.open("ok", "_top"); } } }); return false; }
怎样，和上一篇实现相同的功能，却简单了许多
二、Ajax.Updater
Ajax.Updater是用来将返回的html插入到指定的标签中。比如
页面：
<body> <form name="myform" action="login.do" method="post" > <div id="s"></div> </form> </body>
JavaScript：
function check() { //获得用户输入的用户名和密码 var params = "usr=" + document.getElementById("usr").value + "&pwd=" + document.getElementById("pwd").value; new Ajax.Updater( 's', //要将html插入的标签ID 'login', //能获得HTML的请求URL { method: "post", parameters : params 参数 }); return false; }
这样，从服务器返回的HTML就会被插入到指定的标签中。
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
