一:前台显示:
UTF-8编码
引入自定义css (输入框没有信息时 ,用红色提示)
引入自定义js,userVerify.js(用于和服务器端数据交互)
引入jQuery库
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/userVerify.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/userVerify.js"></script>
需要校验的就一个文本框
请输入用户名:<input type="text" id="userName" class="userText"/> <input type="button" value="校验" id="verifyButton" />
<div id="result"></div>
id留给jQuery取值, class留给css加载效果
div留给jQuery返回处理结果
二: css
用class选择器, 红色边框,
需要添加的图片是一个波浪线 , 横向重复排列 , 放置在底部
.userText {
/*控制文本框的边框是红色的实线*/
border: 1px solid red;
background-image: url(../images/userVerify.gif);
background-repeat: repeat-x;
background-position: bottom;
}
三:jQuery
1.整段代码需要在页面加载完成之后进行加载,所以都包含在:$(document).ready(function() {}); 之中
jQuery整体的语法风格就是: $符号(括号里是html元素) . jQuery方法名( 传参是 js的function{})
2.通过id找到按钮,然后在点击操作时执行语句:$("#verifyButton").click(function())
感觉像是代替onClick()
3.还是通过id找到文本,用.val()方法就可以拿到里边的值 $("#userName").val()
4.$.get (url,success,callback)用来给服务器端发送数据,
5.拿到返回值后, 通过id找到div,然后输出显示:$("#result").html(response);
6.$("#userName").keyup(function(){}) 是在该文本框里写入任何值的时候执行的
7..addClass("userText");和.removeClass 是添加和删除css样式
$(document).ready(function() {
//这里面的内容就是页面装载完成后需要执行的代码
var userNameNode = $("#userName");
//需要找到button按扭,注册事件
$("#verifyButton").click(function() {
//1.获取文本框的内容
var userName = userNameNode.val();
//2.将这个内容发送给服务器端
if (userName == "") {
alert("用户名不能为空");
} else {
$.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){
//3.接收服务器端返回的数据,填充到div中
$("#result").html(response);
});
}
});
//需要找到文本框,注册事件
userNameNode.keyup(function(){
//获取当前文本框中的内容
var value = userNameNode.val();
if (value == "") {
//让边框变成红色,并且带背景图
userNameNode.addClass("userText");
} else {
//去掉边框和背景图
userNameNode.removeClass("userText");
}
});
});
四:后台action
例子里是用的servlet ,大同小异,就是通过request接收到值 ,然后用response返回结果
try {
String param = request.getParameter("userName");
if (param == null || param.length() == 0) {
out.println("用户名不能为空");
} else {
String userName = URLDecoder.decode(param, "UTF-8");
if (userName.equals("wangxingkui")) {
out.println("用户名[" + userName + "]已经存在,请使用别的用户名注册");
} else {
out.println("可以使用用户名[" + userName + "]注册");
}
}
} finally {
out.close();
}