谁有Ajax异步调用后台 实现简单的登录错误提示的实例？

Question

框架是SSH，其中Action是DispatchAction；
SSH + JSP + MYSQL
Ajax实现页面不刷新 并且把“用户名不正确”、“密码输入有误”这样的提示显示在登录框的下面

Answer 1

<script type="text/javascript">
 /*提交验证，异步传输*/ 
$(document).ready(function(){
  $("form").submit(function (){
  if ($("#name").val() == '' || $("#password").val() == ''){ 
  alert("帐号和密码不能为空!");
  return false; 
  }else{             
   $.ajax({                  
   url: 'LoginServlet',       //处理测试页面,注意返回内容，成功返回OK                  
   dataType: 'text',                  
   data: $("form").serialize(),                  
   success: function (msg) {                      
   if (msg == "ok"){ 
   window.location.href = "IndexServlet"; 
   }else{                          
    alert("帐号或密码不正确，请您重新输入!");                          
    return;                      
    }                  
    }              
    });          
 }        
return false;                         ////////////////要阻止表单提交     
});
});

</script>不知道SSH是什么，这是老师布置的作业，帐号密码不正确一起提示的，你看下有用不

Answer 2

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");

PrintWriter out = response.getWriter();
//获取帐号密码
String name = request.getParameter("name");
String password = request.getParameter("password");
String remerber = request.getParameter("remerber_password");


UsersService usersService = Factory.getUsersService();
//获取验证后的用户实体类
Users users = usersService.checkLogin(name, password);

if(users.getId() != 0){
//把用户信息放入session中
request.getSession().setAttribute("users", users);

if("on".equals(remerber)){
  Cookie cookieuser = new Cookie("user",name+"-"+password); 
      //设定有效时间  以秒(s)为单位  保存1个星期
      cookieuser.setMaxAge(60*60*24*7);
      response.addCookie(cookieuser);
}

//跳到IndexServlet中
//response.sendRedirect("IndexServlet?name="+name);
out.print("ok");
}else{
//response.sendRedirect("fail.jsp");
out.print("error");
}
out.flush();
out.close();
}
Servlt中的代码

Answer 3

楼主上网搜搜ajax就可以了。。

Answer 4

用框架验证也可以啊！！像DWR也可以

Answer 5

这个我正在尝试 但是不知道HTML怎么调用这个javascript啊 .. 

Answer 6

我上网找了一个 已经知道问题出现在哪里了 但是不知道怎么解决 多多指教啊 这是javascript中的代码 我估计错误就在这里的提交地址了 <script language="JavaScript">
//创建XmlHttpRequest对象。
var xmlHttp;
function creatXMLHttp(){
if(window.XmlHttpRequest){
xmlHttp=new XmlHttpRequest();
}else{
//IE
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}function checkUserID(userid){
creatXMLHttp();//创建出XMLHttpRequest对象
xmlHttp.open("post","login.do?operation='test'");  //我估计错误就是这个跳转地址了 operation这个参数是DispatchAction中的参数（确定执行DispatchAction中的某一方法的参数 这里执行的是test这个方法）
xmlHttp.onreadystatechange=checkuseridCallBack;
xmlHttp.send(null);
}function checkuseridCallBack(){
if(xmlHttp.readystate==4){
alert("值：" + xmlHttp.status);  //这个的值是404，找不到页面
if(xmlHttp.status==200){
var text=xmlHttp.responseText;
if(text=="true"){
document.getElementById("mes").innerHTML="用户ID已经存在，无法使用！";
}else{
document.getElementById("mes").innerHTML="用户名可以使用！";
}
}
}
}
下面是HTML<form action="" method="post" >
 用户名：<input type="text" name="userid" onblur="checkUserID(this.value)"/>
 <span id="mes"><font color="blue">自动验证用户ID</font></span><br/>
  姓  名：<input type="text" name="name"/><br/>
   密  码：<input type="text" name="password"/> <br/>
 <input type="submit" value="提交"/>
 <input type="reset" value="重置"/>
</form>然后是struts  使用的是DispatchActionpublic class LoginAction extends DispatchAction {

public ActionForward test(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {

PrintWriter out = null;

try {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}

try {
out = response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}                 //什么判断也没有 直接返回true
out.println("true"); out.flush();
out.close();
return null;
}struts的配置文件<action path="/login" type="com.mulan.struts.action.LoginAction" parameter="operation">
      <set-property property="cancellable" value="true" />
      <forward name="index" path="/index.jsp" />
      <forward name="register" path="/register.jsp"/>
      <forward name="test" path="/test/test.jsp"/>
</action>

Answer 7

你都有ssh框架了   直接jsp ajax就行了  不用这么费劲

Answer 8

$.getJSON(url,function(data){})//url是ACTION，data是返回值
action中通过response获得printwriter，print(成功或者失败),页面判断返回值data，jquery获得密码框，设置属性或者值显示

Answer 9

问题解决了 谢谢各位 然后分享一下 
首先是test.jsp<script language="JavaScript">
//创建XmlHttpRequest对象。
var xmlHttp;
var path = '<%=basePath%>'; //这是获得上下文路径
function creatXMLHttp(){
if(window.XmlHttpRequest){
xmlHttp=new XmlHttpRequest();
}else{
//IE
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}function checkUserID(userid){
creatXMLHttp();//创建出XMLHttpRequest对象
xmlHttp.open("post",path + "login.do?operation=test", true);//这个路径test不要加引号
xmlHttp.onreadystatechange=checkuseridCallBack;
xmlHttp.send(null);
}function checkuseridCallBack(){
if(xmlHttp.readystate==4){
if(xmlHttp.status==200){
var text=xmlHttp.responseText;
if(text=='true'){
document.getElementById("mes").innerHTML="用户ID已经存在，无法使用！";
} else {
document.getElementById("mes").innerHTML="用户名可以使用！";
}
}
}
}
然后是HTML<form action="" method="post" >
 用户名：<input type="text" name="userid" onblur="checkUserID(this.value)"/>
 <span id="mes"><font color="blue">自动验证用户ID</font></span><br/>
  姓  名：<input type="text" name="name"/><br/>
   密  码：<input type="text" name="password"/> <br/>
 <input type="submit" value="提交"/>
 <input type="reset" value="重置"/>
</form>再然后是action 是一个DispatchAction哦public class LoginAction extends DispatchAction {


public ActionForward test(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {

try {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}

try {
response.getWriter().print("true");//这个print不要println因为println会多返回一个换行，这样和javascript中的true就不能相等了
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
最后是struts的配置文件//其他的都不重要 parameter="operation"是DispatchAction中从传递的参数中 寻找执行的方法
<action path="/login" type="com.mulan.struts.action.LoginAction" parameter="operation">
      <set-property property="cancellable" value="true" />
      <forward name="index" path="/index.jsp" />
      <forward name="register" path="/register.jsp"/>
      <forward name="test" path="/test/test.jsp"/>
</action>最后的最后 多指教 ..