javaweb(ajax)

Ajax是"Asynchronous Javascript And XML"是一种交互式网页应用的网页开发技术。

Ajax是一种用于快速创建动态网页的技术，无需重新加载整个网页的情况下，能够更新部分网页的技术，通过后台与服务器进行少量数据交换，Ajax可以使网页进行异步更新。意味着可以在不更新加载整个网页情况下，对网页内部进行更新。

<%@ 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(){
       $("#aa").hide();
       //给文本框添加失焦事件
       $("#sname").keyup(function(){//键盘事件
           //让div显示
           $("#aa").show();
           var name=$("#sname").val();
           $.post("autoFill.do", {iname:name}, function(data) {
               var ss=$.parseJSON(data);
               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>";
               $("#aa").html(sb);
           })
       });
   })

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