首先种:古板的ajax异步请求,后台代码以及效能在最下边

首先大家在eclipse中开创3个注册页面regist.jsp,创制一个form表单,注意,由于大家只是已毕用户名校验的效能,上面绿色部门是大家需求商量对象,所以任何的机关可以忽略不看。

情节如下:

<%@ page language=”java” contentType=”text/html; charset=UTF-8″
pageEncoding=”UTF-8″%>
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>用户注册</title>
<link rel=”stylesheet” type=”text/css”
href=”${pageContext.request.contextPath }/css/login.css”>
<script type=”text/javascript”>
//第一,步:ajax异步请求用户名是还是不是留存
 function checkUsername(){
// 拿到文本框值:
var username =
document.getElementById(“username”).value;
// 1.成立异步交互对象
var xhr =
createXmlHttp();//第2步中早已创办xmlHttpRequest,这里直接调用函数就可以了。
// 2.装置监听
xhr.onreadystatechange =
function(){
if(xhr.readyState == 4){
if(xhr.status == 200){

//把重回的数额放入到span中
document.getElementById(“span”).innerHTML
= xhr.responseText;//responseText是后台再次来到的多寡
}
}
}
// 3.开拓连接

xhr.open(“GET”,”${pageContext.request.contextPath}/user_findByName.action?time=”+new
Date().getTime()+”&username=”+username,true);
// 4.发送
xhr.send(null);

//第二部:创建xmlHttp对象
function createXmlHttp(){
var xmlHttpRequest;
try{ // Firefox, Opera 8.0+,
Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new
ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e){
try{
xmlHttp=new
ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e){}
}
}
return xmlHttpRequest;
}
function change(){
var img1 = document.getElementById(“checkImg”);
img1.src=”${pageContext.request.contextPath}/checkImg.action?”+new
Date().getTime();
}
</script>
</head>
<body>
<form action=”${pageContext.request.contextPath
}/user_regist.action” method=”post” onsubmit=”return
checkForm()”;>
<div class=”regist”>
<div class=”regist_center”>
<div class=”regist_top”>
<div class=”left fl”>会员注册</div>
<div class=”right fr”><a
href=”${pageContext.request.contextPath }/index.jsp”
target=”_self”>三星(Samsung)商城</a></div>
<div class=”clear”></div>
<div class=”xian center”></div>
</div>
<div class=”regist_main center”>

//第一,步:首先,大家创设2个用户名input输入框,并加上多个onblur=”checkUsername()”事件
<div
class=”username”>用  户  名:  <input
class=”shurukuang” type=”text” id=”username” name=”username”
onblur=”checkUsername()”/><span id=”span”></span></div>

<div
class=”username”>密        码:  <input
class=”shurukuang” type=”password” id=”password”
name=”password”/></div>
<div class=”username”>确认 密码: <input
class=”shurukuang” type=”password” id=”repassword” name=”repassword”
/></div>
<div
class=”username”>邮  箱  号:  <input
class=”shurukuang” type=”email” id=”email” name=”email”
/></div>
<div
class=”username”>姓        名:  <input
class=”shurukuang” type=”text” id=”name” name=”name”/></div>
<div
class=”username”>手  机  号:  <input
class=”shurukuang” type=”text” id=”phone”
name=”phone”/></div>
<div
class=”username”>地        址:  <input
class=”shurukuang” type=”text” id=”addr” name=”addr”/></div>
<div class=”username”>
<div class=”left
fl”>验  证  码:  <input
class=”yanzhengma” type=”text” id=”checkcode” name=”checkcode”
maxlength=”4″/></div>
<div class=”right fl”><img id=”checkImg” class=”captchaImage”
src=”${pageContext.request.contextPath}/checkImg.action”
onclick=”change()” title=”点击更换验证码”></div>
<div class=”clear”></div>
</div>
</div>
<div class=”regist_submit”>
<input class=”submit” type=”submit” name=”submit” value=”马上登记”
>
</div>
</div>
</div>
</form>
</body>
</html>

第壹种艺术:使用jQuery中的ajax已毕上述效果。**率先form表单以及Action中的都不变,我们只需改变script就可以了。**

第一步:引入js文件<script
type=”text/javascript” src=”${pageContext.request.contextPath
}/js/jquery-3.2.1.min.js”></script>

第二部:

//ajax异步请求用户名是或不是留存
$(function(){
$(‘#username’).change(function(){//给username添加3个change事件
var val = $(this).val();//获取输入框的值
val = $.trim(val);//去空
if(val != “”){//判断值是或不是为空
var url =
“${pageContext.request.contextPath}/user_findByName.action”;//url照旧老大U卡宴L
var args ={“time”:new
Date().getTime(),”username”:val};//那里和地点分歧的是,那里用json方式贯彻传入的**time和username参数
$.post(url,args,function(data){
//发送post请求,后台重临的数额在data里面,
$(‘#span’).html(data);
//把后台重返的数量放入span中**
});
}
});
})

 

然后大家来看一下后台数据上会怎么重临的。由于本身那是利用ssh框架达成的,为了方便,所以本身只呈现在Action中是怎么再次来到数据的,关于ssh框架中service层,dao层的兑现请自行化解。

public class UserAction extends ActionSupport implements
ModelDriven<User> {
private static final long serialVersionUID = 1L;
/**
* 模型驱动
*/
private User user = new User();

 

@Override
public User getModel() {

 

return user;
}

// 注入UserService
private UserService userService;

public void setUserService(UserService userService) {
this.userService = userService;
}

/\**
\
AJAX进行异步校验用户名的举办办法*

\ *
\ @throws IOException*
\/*
public String findByName() throws
IOException {
User existUser =
userService.findByName(user.getUsername());//调用service层的艺术重回数据库中查询出来的对象
// 拿到response对象,向页面输出:
HttpServletResponse response =
ServletActionContext.getResponse();

response.setContentType(“text/html;charset=UTF-8”);//设置编码格式
// 判断再次来到的对象是还是不是为空
if (existUser != null) {
//
如果有,查询到该用户:用户名早已存在

response.getWriter().println(“用户名已经存在”);
} else {
// 就算没有,用户名可以应用
response.getWriter().println(“<font
color=’green’>用户名可以动用</font>”);
}
return NONE;//此处重临空
}

 效果如下:

图片 1

图片 2

相关文章

网站地图xml地图