前端
<script type="text/javascript">
$(function(){
$("#tid").keyup(function(){
//获取当前输入 的值
var value=$(this).val();
//偷偷摸摸发起请求
var url="${pageContext.request.contextPath }/like"
var params="name="+value;
//先清空下方div
$("#did").empty();
$("#did").hide();
if(value){
//有输入值才发请求
$.post(url,params,function(data){ /* $.each(data,function(index,element){
var content=element.name;
var div="<div onmouseover='m1(this)' onmouseout='m2(this)' onclick='m3(this)' style='text-align:left;' >"+content+"</div>";
$("#did").append(div);
});
$("#did").show() */ $(data).each(function(index,element){
alert(element.name);
var div="<div style='text-align:left' onmouseover='m1(this)' onmouseout='m2(this)' onclick='m3(this)'>"+element.name+"</div>";
$("#did").append(div);
})
$("#did").show(); },"json")
}
})
}) function m1(obj){
//修改css样式
$(obj).css("background-color","#ccc");
}
function m2(obj){
$(obj).css("background-color","white");
}
function m3(obj){
//选中 把自己添加到输入框中
var text=$(obj).text();
$("#tid").val(text);
$("#did").empty();
$("#did").hide();
} </script>
后端返回给前端的内容在$.post这个Ajax请求的第三个参数function(data)的data中
data的数据交换格式是json
json有数组[value,value ]和对象{"key":value,"key":value }两种形式 其中value可以为任意类型,所以就出现了各种千变万化的组合,解析的时候看外层 (使用json-lib jar包)
后端
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
// 编码
response.setContentType("text/html;charset=utf-8");
// 获取name参数
String name = request.getParameter("name");
// 调用service查询相关
List<KeyWord> keys = new KeyWordservice().findByName(name);
// 写回去给你
for (KeyWord key : keys) {
System.out.println(key);
}
JSONArray key_json = JSONArray.fromObject(keys);
System.out.println(key_json);
response.getWriter().print(key_json.toString());
} catch (SQLException e) {
e.printStackTrace();
response.getWriter().print("");
}
}
Ajax判断用户名存在核心代码(使用JQuery)
<script>
//页面加载
$(function(){
$("#errorId").hide();
$("#successId").hide();
$("#username").blur(function(){
$("#errorId").hide();
$("#successId").hide();
//获得值
var username = $("#username").val();
if(username){
//ajax访问服务器
$.get("${pageContext.request.contextPath}/CheckUserNameServlet","username="+username,function(data){
if(data>0){
//失败
$("#errorId").show();
$("#successId").hide();
}else{
//成功
$("#errorId").hide();
$("#successId").show();
}
});
}
});
})
</script>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
</div>
<div class="col-sm-4">
<span id="successId" class="label label-success">用户名可用</span>
<span id="errorId" class="label label-danger">用户名不可用</span>
</div>
</div>
附:原生js的Ajax代码
<input type="button" onclick="sendGet()" value="请求"/> <br/>
<script type="text/javascript">
function sendGet(){
//1 获得ajax引擎
var xmlhttp=null;
// 谷歌、火狐、IE最新浏览器
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else if (window.ActiveXObject){
//IE老版本浏览器（IE6、7、8 等）
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2 设置回调函数
xmlhttp.onreadystatechange = function(){
alert(xmlhttp.readyState);
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
alert("响应数据" + xmlhttp.responseText);
}
}
};
//3 确定请求方式、路径及参数
/* xmlhttp.open("GET","/2level_daan/hello?username=jack&password=1234"); */
xmlhttp.open("POST","/2level_daan/hello");
//4 设置请求编码
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");//get 不需要
//4 发送请求
/* xmlhttp.send(null); */
xmlhttp.send("username=杰克&password=1234");
}
</script>