ajax账号验证的问题
由于本人刚学ajax,是个菜鸟,恳请各位看下,使用mvc模式显示页面
[code=jsp]<%@page contentType="text/html;charset=utf-8" import="com.zz.dao.*,java.util.*,com.zz.bean.*"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Untitled Page</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>
{
FONT-SIZE: 12px
}
.gridView {
BORDER-RIGHT: #bad6ec 1px; BORDER-TOP: #bad6ec 1px; BORDER-LEFT: #bad6ec 1px; COLOR: #566984; BORDER-BOTTOM: #bad6ec 1px; FONT-FAMILY: Courier New
}
.gridViewHeader {
BORDER-RIGHT: #bad6ec 1px solid; BORDER-TOP: #bad6ec 1px solid; BACKGROUND-IMAGE: url(../images/bg_th.gif); BORDER-LEFT: #bad6ec 1px solid; LINE-HEIGHT: 27px; BORDER-BOTTOM: #bad6ec 1px solid
}
.gridViewItem {
BORDER-RIGHT: #bad6ec 1px solid; BORDER-TOP: #bad6ec 1px solid; BORDER-LEFT: #bad6ec 1px solid; LINE-HEIGHT: 32px; BORDER-BOTTOM: #bad6ec 1px solid; TEXT-ALIGN: center
}
.cmdField {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BACKGROUND-IMAGE: url(../images/bg_rectbtn.png); OVERFLOW: hidden; BORDER-LEFT: 0px; WIDTH: 67px; COLOR: #364c6d; LINE-HEIGHT: 27px; BORDER-BOTTOM: 0px; BACKGROUND-REPEAT: repeat-x; HEIGHT: 27px; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none
}
.buttonBlue {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BACKGROUND-IMAGE: url(../images/bg_button_blue.gif); BORDER-LEFT: 0px; WIDTH: 78px; COLOR: white; BORDER-BOTTOM: 0px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 21px
}
</STYLE>
<META content="MSHTML 6.00.2900.5848" name=GENERATOR>
</HEAD>
<BODY
style="BACKGROUND-POSITION-Y: -120px; BACKGROUND-IMAGE: url(../images/bg.gif); BACKGROUND-REPEAT: repeat-x">
<SCRIPT language="javascript">
var xmlHttp;
var flag;
//创建XMLHttpRequest核心对象
function createXMLHttp(){
if(window.SMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
//建立xmlHttp核心对象
function checkUsername(username){
createXMLHttp();
xmlHttp.open("POST","CheckServlet?username="+username");
xmlHttp.onreadystatechange=checkUsernameCallback;
xmlHttp.send(null);
document.getElementById("msg").innerHTML="正在验证";
}
//定义回调函数
function checkUsernameCallback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var text=xmlHttp.responseText;
if(text="true"){
flag=false;
document.getElementById("msg").innerHTML="用户名已注册";
}else{
flag="true";
document.getElementById("msg").innerHTML="此用户名可用";
}
}
}
}
function checkForm(){
return flag;
}
</SCRIPT>
<DIV>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR style="BACKGROUND-IMAGE: url(../images/bg_header.gif); BACKGROUND-REPEAT: repeat-x" height=47>
<TD width=10><SPAN style="FLOAT: left; BACKGROUND-IMAGE: url(../images/main_hl.gif); WIDTH: 15px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 47px">
</SPAN></TD>
<TD>
<SPAN style="FLOAT: left; BACKGROUND-IMAGE: url(../images/main_hl2.gif); WIDTH: 15px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 47px"></SPAN>
<SPAN style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FLOAT: left; BACKGROUND-IMAGE: url(../images/main_hb.gif); PADDING-BOTTOM: 10px; COLOR: white; PADDING-TOP: 10px; BACKGROUND-REPEAT: repeat-x; HEIGHT: 47px; TEXT-ALIGN: center; 0px: ">添加用户 </SPAN>
<SPAN style="FLOAT: left; BACKGROUND-IMAGE: url(../images/main_hr.gif); WIDTH: 60px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 47px"></SPAN></TD>
<TD style="BACKGROUND-POSITION: 50% bottom; BACKGROUND-IMAGE: url(../images/main_rc.gif)" width=10></TD>
</TR>
<TR>
<TD style="BACKGROUND-IMAGE: url(../images/main_ls.gif)"> </TD>
<TD style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; COLOR: #566984; PADDING-TOP: 10px; BACKGROUND-COLOR: white" vAlign=top align=middle>
<DIV>
<TABLE class=gridView id=ctl00_ContentPlaceHolder2_GridView1 style="WIDTH: 100%; BORDER-COLLAPSE: collapse" cellSpacing=0 rules=all border=1>
<form action="addUser" method="post" onsubmit="return checkForm()">
<hr/>
<table align="center">
<tr><td>账号:</td><td><input type="text" name="username" onblur="checkUsername(this.value)"/><span id="msg"></span></td></tr>
<tr><td>密码:</td><td><input type="password" name="password" /></td></tr>
<tr><td>性别:</td><td><input type="radio" name="sex" value="male">男<input type="radio" name="sex" value="female">女</td></tr>
<tr><td>电话:</td><td><input type="text" name="tel"/></td></tr>
<tr><td>地址:</td><td><input type="text" name="address"/></td></tr>
<tr><td><input type="submit" value="提交"></td><td><input type="reset" value="取消" onClick="window.location.href='UserInfo.jsp'"/></td></tr>
</table>
</form>
</TABLE>
</DIV>
</TD>
<TD style="BACKGROUND-IMAGE: url(../images/main_rs.gif)"></TD>
</TR>
<TR style="BACKGROUND-IMAGE: url(../images/main_fs.gif); BACKGROUND-REPEAT: repeat-x" height=10>
<TD style="BACKGROUND-IMAGE: url(../images/main_lf.gif)"></TD>
<TD style="BACKGROUND-IMAGE: url(../images/main_fs.gif)"></TD>
<TD style="BACKGROUND-IMAGE: url(../images/main_rf.gif)"></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</BODY>
</HTML>
[/code]
验证页面(这里只是验证用户名是否存在的代码)
package com.zz.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import javax.resource.cci.ResultSet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zz.db.DBOperator;
public class CheckServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html");
String username=req.getParameter("username");
PrintWriter out=resp.getWriter();
Connection conn=DBOperator.getConn();
String sql="select count(username) from user where username=?";
try {
PreparedStatement pstmt=conn.prepareStatement(sql);
pstmt.setString(1, username);
ResultSet rs=(ResultSet) pstmt.executeQuery();
if(rs.next()){
if(rs.getInt(1)>0){
out.print("true");
}else{
out.print("false");
}
}
out.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
try {
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(req, resp);
}
}
配置文件
--------------------编程问答-------------------- 你得说明什么问题? --------------------编程问答-------------------- 楼主是要做什么? 不懂。。
<servlet>
<servlet-name>CheckServlet</servlet-name>
<servlet-class>com.zz.servlet.CheckServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckServlet</servlet-name>
<url-pattern>/CheckServlet</url-pattern>
</servlet-mapping>
至于所说的mvc 谈不上!
--------------------编程问答-------------------- --------------------编程问答-------------------- 在注册时输入完用户名进行验证该用户名是否存在,不存在则提示已被注册,反之则是可用,可以继续下一步。 --------------------编程问答--------------------
在注册时输入完用户名进行验证该用户名是否存在,不存在则提示已被注册,反之则是可用,可以继续下一步。 --------------------编程问答-------------------- 至于MVC可以不管现在,只要实现那个验证功能就可以了 --------------------编程问答-------------------- 用jquery中的$get,不要用原生的ajax。 --------------------编程问答-------------------- 自己debug一下很快就解决了嘛,首先确定是不是可以进入servlet ,然后确定servlet是否正确执行,再看回调能不能正确显示。
ps.用jquery多好呀 --------------------编程问答-------------------- 你的servlet里面要响应一个值给jsp页面,你把你要传给Jsp页面的返回值out.print()试试.还有搞个jquery的文档看下ajax的请求 ,比这种方法清晰不少....
补充:Java , Web 开发