目录
1. 为什么要使用Ajax
Ajax可以实现动态不刷新（局部刷新）
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。
2. 方法
2.1 $.ajax()方法
ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法
$.ajax({name:value, name:value, ... })
该参数规定 AJAX 请求的一个或多个名称/值对
实例
$("button").click(function(){
$.ajax({url:"demo_test.txt",success:function(result){
$("#div1").html(result);
}});
});2.2 jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据
语法
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
实例
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。
然后我们连同请求（name 和 city）一起发送数据。
"demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
2.3 jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
实例
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});3. 案例（自动补全）
前端代码
<%@ 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>
<!-- 引入jquery库 -->
<script type="text/javascript" src="${pageContext.request.contextPath}static/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
function mgfc(obj){
//将选中的内容赋给文本框
$("#ta").val(obj.innerText);
//隐藏div
$("#da").hide();
}
$(function(){
//1.给文本框添加键盘事件
$("#ta").keyup(function(){
//获取文本框的内容 let局部变量 var全局变量
let ta = $("#ta").val();
//发送ajax请求
$.post('${pageContext.request.contextPath}/UserServlet.do',{ta:ta},function(data){
//将后台响应的数据转换成js集合
let us = $.parseJSON(data);
if(us.length == 0){//后台没有数据
$("#da").hide(); //没有数据则隐藏div
}else{
$("#da").show(); //有数据就先显示div
var sb = "<ul>"
//遍历集合us
$.each(us,function(i,u){// u表示每个用户对象
sb += "<li onclick=\"mgfc(this)\" onmouseover=\"this.className='la'\" onmouseout=\"this.className='lb'\">名字："+u.name+"</li>"
})
sb += "</ul>";
//最后把sb赋给div
$("#da").html(sb);
}
});
})
})
</script>
<style type="text/css">
li{
width: 100px;
list-style: none;
}
/* 当用户选择数据的时候该数据的背景颜色 */
.la{
background-color: pink
}
/* 数据背景颜色恢复初始 */
.lb{}
</style>
</head>
<body>
<input type="text" id="ta"/>
<button>查询</button>
<div id="da"></div>
<br>
</body>
</html>servlet
public class UserServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
//获取模糊查询关键字
String name = req.getParameter("ta");
//调用模糊查询方法
UserDao ud = new UserDao();
List<User> listUser = ud.query(name);
//把集合 listUser 转换成前台和后台都识别的数据格式：JSON（键值对形式存储数据）
String data = JSON.toJSONString(listUser);
//把json字符串data返回给前端
out.write(data);
out.flush();
out.close();
}
}
420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
