javaweb（ajax+json实现自动补全）

最新推荐文章于 2022-11-14 13:02:00 发布

菜菜子吖

最新推荐文章于 2022-11-14 13:02:00 发布

阅读量585

点赞数

分类专栏： ajax 文章标签： java

本文链接：https://blog.csdn.net/m0_68761656/article/details/123784125

版权

ajax 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

为什么使用Ajax?

无刷新：不刷新整个页面，只刷新局部

无刷新的好处: 只更新部分页面，有效利用带宽，提高用户体验

什么是Ajax?

Asynchr onous 异步的 JavaScript And Xml

Ajax:只刷新局部页面的技术

JavaScript：更新局部的网页 XML：一般用于请求数据和响应数据的封装 XMLHttpRequest对象：发送请求到服务器并获得返回结果 CSS：美化页面样式异步：发送请求后不等返回结果，由回调函数处理结果

通过 HTTP 请求加载远程数据。$.ajax()

通过远程 HTTP POST 请求载入信息。 $.post()。
<%@ 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">
<title>Insert title here</title>
<style type="text/css">
li{list-style: none;}
#aa{border: solid 1px gray;width: 406px;}
.xx{background: yellow;}
.yy{}
</style>

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

<script type="text/javascript">
$(function(){
//让div隐藏
$("#aa").hide();
//给文本框添加失焦事件
$("#sname").keyup(function(){//键盘事件
//让div显示
$("#aa").show();
//获取文本框的值
var name=$("#sname").val();
//$.post() url,data,success,[dataType]
$.post("autoFill.do", {iname:name}, function(data) {
//json格式的对象数组的字符串
//将json格式的对象数组字符串-->js的对象数组
//var ss=eval(data);//js方式
var ss=$.parseJSON(data);//jQuery方式
var sb="<ul>";
//遍历集合
$.each(ss,function(i,u){//下标,用户
sb+="<li οnclick=\"myf('"+u.uname+"')\" οnmοuseοver=\"this.className='xx'\" οnmοuseοut=\"this.className='yy'\">"+u.uname+"</li>";
});
sb+="</ul>";
//给div赋值
$("#aa").html(sb);
})
});
})

function myf(name) {
//给文本框赋值
$("#sname").val(name);
//让div隐藏
$("#aa").hide();
}
</script>
</head>
<body>
<h2>使用jQuery的ajax+json实现自动补全功能</h2>
<input type="text" id="sname" style="width:400px;">
<div id="aa"></div>
</body>
</html>