想做一个无刷新验证帐号是否存在的功能 希望高手能够详细说明。就是当用户输入帐号以后,,,要去数据库中查询是否存在我知道使用ajax这个东西。。所以高手能够给个样式代码因为是第一次用。。所以很多都不是很明白,,,希望能详细说说,,,谢谢我的界面是jsp。。用的框架是struts2 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 这个需要ajax吗?最简单的jsp+javabean就可以了啊 struts2 不太熟悉我可以说一下我的思路给你,呵呵,希望能对你有用ajax提交url 带用户名给action例如:xxx.do?method=xxx&checkName=aaa在action类里面得到 aaa 后查询数据库判断是否存在然后返回个状态值就好了,比如:0或1 在js中判断返回值,返回相应提示信息给用户。 很多人都问过类似的问题,要解决这个问题,首先要明白整个流程 首先不能提交,否则就会刷新,所有要用ajax,而ajax是需要xmlHttpRequest的,以注册时验证用户名是否存在为例子:所以我们的jsp的步骤是: 1 当username失去焦点,也就是用户去填写下一项时,自动到服务器去校验 2 建立xmlHttpRequest向服务器进行校验 3 监视服务器的响应,当信息返回时,将校验结果显示给用户所以,我们的jsp页面代码如下 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Register Page</title> <script type="text/javascript"> <!-- var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function checkUser() { document.getElementById("spCheckUser").style.color = "green"; document.getElementById("spCheckUser").innerHTML="自动检测用户名..."; createXMLHttpRequest(); var strUser = document.getElementsByName("username")[0].value; var url = "<action的映射路径>/CheckUserExist.action?username=" + escape(strUser); xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); } function callback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { var blResult = xmlHttp.responseText; setMessage(blResult); } } } function setMessage(isUserExistInDb) { var messageArea = document.getElementById("spCheckUser"); if (isUserExistInDb == "false") { messageArea.innerHTML = "该用户名还没有被占用,您可以注册"; } else{ messageArea.style.color = "red"; messageArea.innerHTML = "该用户名已经被占用"; } } //--> </script></head><body> username:<input type="text" name="username" id="username" size="20" onblur="checkUser();"/><span id="spCheckUser" style="color:red;"></span><br /> password:<input type="password" size="20" /></body></html>其实,我们必须在struts2的action里做配合,进行真正的校验,在 action里,我们只需要接受username即可,struts2是自动封装的,所以需要在action里定义一个username的成员字段,并加set get函数然后将校验的结果作为text/xml类型返回给用户浏览器这一端 package tutorial;//代码由dyw31415926编写import java.io.PrintWriter;import javax.servlet.http.HttpServletResponse;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionSupport;public class CheckUserExist extends ActionSupport{ private String username; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } /** * 如果该用户已经存在了,返回true; */@Override public String execute(){ HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/xml;charset=utf-8"); response.setHeader("Cache-Control", "no-cache"); try { boolean blUserExist = this.isUserExist(this.getUsername()); PrintWriter pw = response.getWriter(); pw.print(String.valueOf(blUserExist)); pw.flush(); pw.close(); pw = null; } catch (Exception ex) { System.out.println("出错了!"); } return NONE; } /** * 到数据库里去校验该用户是否存在,这里只是简单的做个判断 * 如果用户名是david,怎返回true,表示该用户已经存在了 * 否则,返回false,表示该用户不存在,可以顺利注册 * @param username 要校验的用户名 * @return boolean 该用户是否已经存在 */ public boolean isUserExist(String username){ if(username.equals("david")){ return true; } else{ return false; } }}struts.xml里action的配置,注意不需要定义result<action name="CheckUserExist" class="tutorial.CheckUserExist"> </action>这样,你需要的功能就完成了 重贴一下jsp代码,没格式化 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Register Page</title> <script type="text/javascript"> <!-- var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function checkUser() { document.getElementById("spCheckUser").style.color = "green"; document.getElementById("spCheckUser").innerHTML="自动检测用户名..."; createXMLHttpRequest(); var strUser = document.getElementsByName("username")[0].value; var url = "/Struts2FileUpload/ming/CheckUserExist.action?username=" + escape(strUser); xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); } function callback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { var blResult = xmlHttp.responseText; setMessage(blResult); } } } function setMessage(isUserExistInDb) { var messageArea = document.getElementById("spCheckUser"); if (isUserExistInDb == "false") { messageArea.innerHTML = "该用户名还没有被占用,您可以注册"; } else{ messageArea.style.color = "red"; messageArea.innerHTML = "该用户名已经被占用"; } } //--> </script></head><body> username:<input type="text" name="username" id="username" size="20" onblur="checkUser();"/><span id="spCheckUser" style="color:red;"></span><br /> password:<input type="password" size="20" /></body></html> 上面的同学说的很详细啊。但是如果想更好的使用ajax的话,可以去看一下prototype框架的ajax应用。用起来很简单,而且很实用。有空可以去看看 jsp页面,多选框 获取combox的store并给赋新的store 我 现在开始学hibernate那位大虾给点建议 帮忙啊??????在远程服务器上为什么找不到servlet呢? 关于权限控制的问题(怎样禁止在IE地址栏中直接输入页面地址)? 超级菜鸟问题:tomcat配置问题!!! 这是什么原故?帮忙看一下! 用j2sdkee1.3.1执行带java Bean的jsp,出现的问题,2天了,还没搞定 关于电子商务平台开发的问题,请求帮助. jsp2word问题(求结贴) 怎么从list中读取到自己想要的数据 服务器端ocx控件和客户端ocx控件的写法区别
首先不能提交,否则就会刷新,所有要用ajax,而ajax是需要xmlHttpRequest的,
以注册时验证用户名是否存在为例子:
所以我们的jsp的步骤是:
1 当username失去焦点,也就是用户去填写下一项时,自动到服务器去校验
2 建立xmlHttpRequest向服务器进行校验
3 监视服务器的响应,当信息返回时,将校验结果显示给用户
所以,我们的jsp页面代码如下 <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Register Page</title>
<script type="text/javascript">
<!--
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
} function checkUser() {
document.getElementById("spCheckUser").style.color = "green";
document.getElementById("spCheckUser").innerHTML="自动检测用户名...";
createXMLHttpRequest();
var strUser = document.getElementsByName("username")[0].value;
var url = "<action的映射路径>/CheckUserExist.action?username=" + escape(strUser);
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
} function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var blResult = xmlHttp.responseText;
setMessage(blResult);
}
}
}
function setMessage(isUserExistInDb) {
var messageArea = document.getElementById("spCheckUser");
if (isUserExistInDb == "false") {
messageArea.innerHTML = "该用户名还没有被占用,您可以注册";
}
else{
messageArea.style.color = "red";
messageArea.innerHTML = "该用户名已经被占用";
}
}
//-->
</script>
</head>
<body>
username:<input type="text" name="username" id="username" size="20" onblur="checkUser();"/><span id="spCheckUser" style="color:red;"></span><br />
password:<input type="password" size="20" />
</body>
</html>其实,我们必须在struts2的action里做配合,进行真正的校验,在 action里,我们只需要接受username即可,
struts2是自动封装的,所以需要在action里定义一个username的成员字段,并加set get函数
然后将校验的结果作为text/xml类型返回给用户浏览器这一端 package tutorial;
//代码由dyw31415926编写
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class CheckUserExist extends ActionSupport{
private String username;
public String getUsername() {
return username;
} public void setUsername(String username) {
this.username = username;
} /**
* 如果该用户已经存在了,返回true;
*/
@Override
public String execute(){
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/xml;charset=utf-8");
response.setHeader("Cache-Control", "no-cache");
try {
boolean blUserExist = this.isUserExist(this.getUsername());
PrintWriter pw = response.getWriter();
pw.print(String.valueOf(blUserExist));
pw.flush();
pw.close();
pw = null;
} catch (Exception ex) {
System.out.println("出错了!");
}
return NONE;
}
/**
* 到数据库里去校验该用户是否存在,这里只是简单的做个判断
* 如果用户名是david,怎返回true,表示该用户已经存在了
* 否则,返回false,表示该用户不存在,可以顺利注册
* @param username 要校验的用户名
* @return boolean 该用户是否已经存在
*/
public boolean isUserExist(String username){
if(username.equals("david")){
return true;
}
else{
return false;
}
}
}
struts.xml里action的配置,注意不需要定义result<action name="CheckUserExist" class="tutorial.CheckUserExist">
</action>
这样,你需要的功能就完成了
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Register Page</title>
<script type="text/javascript">
<!--
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
} function checkUser() {
document.getElementById("spCheckUser").style.color = "green";
document.getElementById("spCheckUser").innerHTML="自动检测用户名...";
createXMLHttpRequest();
var strUser = document.getElementsByName("username")[0].value;
var url = "/Struts2FileUpload/ming/CheckUserExist.action?username=" + escape(strUser);
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
} function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var blResult = xmlHttp.responseText;
setMessage(blResult);
}
}
}
function setMessage(isUserExistInDb) {
var messageArea = document.getElementById("spCheckUser");
if (isUserExistInDb == "false") {
messageArea.innerHTML = "该用户名还没有被占用,您可以注册";
}
else{
messageArea.style.color = "red";
messageArea.innerHTML = "该用户名已经被占用";
}
}
//-->
</script>
</head>
<body>
username:<input type="text" name="username" id="username" size="20" onblur="checkUser();"/><span id="spCheckUser" style="color:red;"></span><br />
password:<input type="password" size="20" />
</body>
</html>
用起来很简单,而且很实用。有空可以去看看