一、使用get方式
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">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
//给username派发一个失去焦点事件 发送ajax请求
$("input[name='username']").blur(function(){
//获取输入的值
var $value=$(this).val();
//alert($value);
$.get("/day15/checkUsername4Ajax","username="+$value,function(d){
//alert(d);
if(d==1){
$("#usename_msg").html("<font color='green'>用户名可以使用</font>");
}else{
$("#usename_msg").html("<font color='red'>用户名已被使用</font>");
}
});
});
})
</script>
</head>
<body>
<form method="post" action="#">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username"></td>
<td><span id="usename_msg"></span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" name="password"></td>
<td></td>
</tr>
<tr>
<td colspan='3'><input type="submit" id="sub"></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
//失去焦点 发送ajax
</script>
</html>
二、post方式
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">
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//文本框keyup的时候发送ajax
$("#tid").keyup(function(){
//获取文本框的值
var $value=$(this).val();
//内容为空的时候不发送ajax
if($value!= null && $value!=''){
//清空div
$("#did").html("");
$.post("/day15/searchKw","kw="+$value,function(d){
//不为空的时候切割字符串
if(d!=''){
var arr=d.split(",");
$(arr).each(function(){
//alert(this);
//可以将每一个值放入一个div 将其内部插入到id为did的div中
$("#did").append($("<div>"+this+"</div>"));
});
//将div显示
$("#did").show();
}
});
}else{
//内容为空的时候 将div隐藏
$("#did").hide();
}
});
})
</script>
<title>Insert title here</title>
</head>
<body>
<center>
<div>
<h1>黑马搜索</h1>
<div>
<input name="kw" id="tid"><input type="button" value="黑马一下">
</div>
<div id="did" style="border: 1px solid red;width: 171px;position:relative;left:-34px;display:none"></div>
</div>
</center>
</body>
</html>
网友评论