使用AJAX提交表单遇到的问题?

三国vip 发布于 2013/03/08 15:42
阅读 361
收藏 1
我是在loginServlet中处理的登录过程,1、如果用户名不存在或密码错误,则用户点击提交按钮时,页面实现无刷新提交并提示错误(这一点已经实现)。2、如果用户名跟密码匹配则实现页面跳转。但是我在servlet中设置了页面跳转(代码也确实执行),页面并无跳转,还是停留在登陆界面。
      弄了半天也没弄明白,小弟初次使用AJAX,还望大家指导一下啊。谢谢。
//javascript中的响应函数
function processResponse() {
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
var res = XMLHttpReq.responseText;
document.getElementById("result").innerHTML = res;
} else {
window.alert("你请求的页面有异常");
}
}
}

//用户点击按钮时调用的函数
function userCheck() {
var username = document.loginform.username.value;
var password = document.loginform.password.value;
sendRequest("loginServlet?service=login&username=" + username
+ "&password=" + password);
}

//这是我的表单。
<form id="loginform" method="post" name="loginform">
<table>
<tr>
<td>用户名:</td>
<td>
<input name="username"id="username"></td>
</tr>
<tr>
<td>密  码:</td>
<td>
<input type="password" name="password" id="password"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="submit" value="登录"  onclick="userCheck()">
</td>
</tr>
</table>
</form>

//loginServlet中的部分代码
int result = userdao.login(user);
if(result == -1)
{
out.println("<response>");
out.println("<result>" + "用户名不存在!" + "</result>");
out.println("</response>");
out.close();
}
else if(result == 0)
{
out.println("<response>");
out.println("<result>" + "用户密码错误!" + "</result>");
out.println("</response>");
out.close();
}
else if(result == 1)
{
HttpSession session = req.getSession();
session.setAttribute("username", username);
req.getRequestDispatcher("login_success.jsp").forward(req, resp);
}
加载中
0
小人物_Amor
小人物_Amor

页面调用ajax方法:<input type="button" id="submit" value="登录"  onclick="userCheck()">

js代码:

function userCheck(){

    $.get("loginServlet?service=login&name="+$("#userName").val()+"&password="+$("#password").val(),null,function(data){
        $("#result").html(data);
    });

}

试试这么写~需要引入jquery包<script type="text/javascript" src="jquery-1.3.1.js"></script>

三国vip
三国vip
我知道Jquery有个beforeSubmit()和afterSubmit(),我差不多就是想用这个功能,但是又不想用jquery。
0
小人物_Amor
小人物_Amor
大概就是这个意思,没有完全按照你的代码来写,建议先学学ajax~在你的页面中加入<div id="result"></div>这句话,试试效果,也许你就明白了!
三国vip
三国vip
这个标签我加了,而且密码错误时就是在这个标签中显示的。但问题是现在我如果用户名跟密码都正确的话,在servlet中即if(result==1)时代码执行,但是页面却不跳转。
0
犀利的羊羔
为什么不用js跳呢 
三国vip
三国vip
怎么跳?
0
犀利的羊羔
window.location.href
三国vip
三国vip
一句惊醒梦中人啊,加个判断就好了,嘿嘿
0
小人物_Amor
小人物_Amor

那就这样做:

后台代码改一下:

if(result == -1)
{
response.getWriter().write("用户名错误!");

}
else if(result == 0)
{
response.getWriter().write("用户密码错误");

}
else if(result == 1)
{
HttpSession session = req.getSession();
session.setAttribute("username", username);
response.getWriter().write("登录成功");

}

前台代码:在回调函数里判断一下:

if(data=="用户名错误!"){

     $("#result").html(data);

}

 

if(data=="用户密码错误!"){

     $("#result").html(data);

}

 

if(data=="登录成功!"){

     window.location="你想跳转的页面";

}

 

三国vip
三国vip
恩,这个方法倒是可以。不过得在页面中加入判断以及跳转页面的链接,感觉不安全,正常情况下应该在后台控制页面跳转哈。不过起码解决了我的一个难题,谢谢了哈!
0
jeffsui
jeffsui

恩 其实你封装json数据的时候,构建这样的数据类型

jsonStr={"success":"1","data":"login success!"};

jsonStr={"success":"0","data":"login failure!wrong user or password!"};


三国vip
三国vip
不太明白,没用过json,就会简单的用js。
小人物_Amor
小人物_Amor
其实就应该这样做!
0
A
Arleigh
给你推荐一个框架吧,,jquery.form.js   去google搜
三国vip
三国vip
我一直用的是Jquery Mini版的,那个有试用期
A
Arleigh
回复 @曹波 : 使用期限?
三国vip
三国vip
jquery不是有使用期限吗?
返回顶部
顶部