关于上个问题的继续 为什么我通过Ajax返回来的值是true 我必须点击2次登录按钮才能登陆成功
index.jsp
------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>欢迎页面</title>
<style type="text/css">
body {
font-family: 黑体;
font-size: 20px;
font-weight: bold;
}
</style>
<script type="text/javascript">
var flag=false;
alert(flag);
var xmlhttp;
function checked() {
var userInput = document.getElementById("userInput").value;
var managerId=document.getElementById("managerId").value;
var managerPWD=document.getElementById("managerPWD").value;
if(userInput=="")
{
document.getElementById("show").innerHTML="<font color='red'>您没有选择登录功能</font>";
flag= false;
return flag;
}
if(userInput!=1 && userInput!=2 )
{
document.getElementById("show").innerHTML="<font color='red'>您输入的不正确</font>";
flag= false;
return flag;
}
if(managerId=="")
{
document.getElementById("managers").innerHTML="<font color='red'>管理员账号不能为空</font>";
flag= false;
return flag;
}
if(managerPWD=="")
{
document.getElementById("managerssPWD").innerHTML="<font color='red'>管理员密码不能为空</font>";
flag= false;
return flag;
}
send_httpRequest();
return flag;
}
function createHttpRequest() //创建XMLHttpRequest对象
{
if(window.XMLHttpRequest)
{
xmlhttp =new XMLHttpRequest();
}else if(window.ActiveXObject)
{
xmlhttp =new ActiveXObject("Microfost.XMLHTTP");
}
}
function send_httpRequest()
{
var managerId=document.getElementById("managerId").value;
var managerPWD=document.getElementById("managerPWD").value;
createHttpRequest();
xmlhttp.open("post","index?managerId="+managerId+"&&managerPWD="+managerPWD,true);
xmlhttp.onreadystatechange=Callback;
xmlhttp.send(null);
}
function Callback()
{
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
var text = xmlhttp.responseText;
alert("text"+text);
if(text=="true")
{
flag = true;
alert(flag);
}
else
{
flag = false;
alert(flag);
}
}
}
}
</script>
</head>
<body style="background-color: #999">
<div style="padding-top: 100px;" align="center">
<form action="showManager.jsp" onsubmit="return checked()"
method="post">
<table width="1024" height="223">
<tr>
<td colspan="2" align="center">
欢迎你进入商品管理系统
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" align="center">
1.商品购物系统
</td>
</tr>
<tr>
<td colspan="2" align="center">
2.商品管理系统
</td>
</tr>
<tr>
<td width="465" height="21" align="center">
如果你是客户请选择<1>
</td>
<td width="547" align="center">
如果你是管理员请选择<2>
</td>
</tr>
<tr>
<td width="465" align="right">
请输入:
<input type="text" name="userInput" id="userInput" />
</td>
<td width="547" id="show" align="left">
</td>
</tr>
<tr>
<td width="465" align="right">
请输入管理员帐号:
<input type="text" name="manager" id="managerId" />
</td>
<td width="547" id="managers" align="left">
</td>
</tr>
<tr>
<td width="465" align="right">
请输入管理员密码:
<input type="text" name="managersPWD" id="managerPWD" />
</td>
<td width="547" id="managerssPWD" align="left">
<!-- 注意在遨游中document.getElementById既可以按照id获取，也可以按照name获取 -->
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录"
style="background-color: #666666; border: 1px 1px 1px 1px; font-weight: bold;"
width="100px;" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
index.java
-----------------
package cn.jbit.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.jbit.dao.GetConnection;
import cn.jbit.interfaces.ShopManagerInter;
import cn.jbit.interfacesImpl.ShopManagerInterImpl;
public class index extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print("true");
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
关于上个问题的继续 为什么我通过Ajax返回来的值是true 我必须点击2次登录按钮才能登陆成功 我alert了一下之后 我第一得到的结果是true啊 但是为什么我必须点击2次登录按钮之后才能登陆成功那
[解决办法]
既然是ajax异步请求，就是不需要等到它执行完毕返回结果就可以继续下一步了
之所以点两次登录才生效，其实是一种假象，是第一次执行完了返回结果，将全局变量flag的值给改变了
即下面这段代码中
send_httpRequest();
return flag;
//send_httpRequest()没有执行完就可以运行下面这段代码，即return flag，而flag没有进行初始化是undifined，相当于true了
所以要想用ajax进行验证，逻辑要改一下
在form标签上不要onsubmit="return checked()"
而是在提交按钮上调用js事件，onclick="checked();"
js里面就不要返回值了，验证错误return就可以
然后在ajax的返回函数里面加上这句
。。。。。。。。。。。。。。。。
if(text=="true")
{
flag = true;
alert(flag);
document.form1.submit();}//form1为form的name，自个加上
else
{
flag = false;
alert(flag);
}
。。。。。。。。。。。。。。。。
------解决方案--------------------
