jQuery入门之一:校验文本,页面提示

一:前台显示:

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();
}