目录
一、什么是Ajax？
二、为什么要使用Ajax？
三、Ajax的基本使用
1. $.Ajax ()
2.$.post()
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
3.$.get()
四、案例
过滤器：EncodingFilter.java
package com.xyz.filter;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
/**
* 将所有的请求的编码都设置为utf-8
*/
@WebFilter("/*")
public class EncodingFilter implements Filter{
@Override
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
req.setCharacterEncoding("utf-8");
//破碎重组
chain.doFilter(req, resp);
}
}
案例一：无刷新登录
登录判断：LoginServlet.java
package com.xyz.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 登录判断
**/
@WebServlet("/login.do")
public class LoginServlet 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 {
//获取表单数据
String account = req.getParameter("account");
String password = req.getParameter("password");
PrintWriter out = resp.getWriter();
if("root".equals(account)root123".equals(password)) {
//登录成功
out.print("yes");
}else {
//登录失败
out.print("no");
}
}
}
登录界面：login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div>
<p><input id="account" name="account"></p>
<p><input id="password" name="password"></p>
<button onclick="login()">登录</button>
</div>
<script type="text/javascript">
function login(){
//取到页面的值
let account=$("#account").val()
let password=$("#password").val()
//通过jQuery来发送ajax请求去后台 login.do
//ajax方法：get/post
$.ajax({
//访问地址
url:"login.do",
//携带的数据
data:{account,password},
//希望后台给的数据类型
dataType:"text",
//什么请求类型
type:"get",
//成功
success(resp){
//resp就是后台给我的值
if(resp.trim()==="yes"){
alert("登录成功")
location.href="index.jsp"
}else{
alert("登录失败")
}
},
//错误
error(){
}
})
/**
$.get( //get请求
//1.请求路径
"login.do",
//2.携带的数据
//直接放数据，名字就是数据的名字
{account,password},
//3.回调函数
function (resp){
//resp就是后台给我的值
if(resp.trim()==="yes"){
alert("登录成功")
location.href="index.jsp"
}else{
alert("登录失败")
}
},
//4.返回内容格式
"text" //希望后台给我的是普通的文本
)
**/
}
</script>
</body>
</html>案例二：使用Ajax实现搜索自动提示
查询处理：SearchServlet.java
package com.xyz.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
/**
* 查询出对应关键字的名称
* @author zjjt
*/
@WebServlet("/search.do")
public class SearchServlet extends HttpServlet{
//数据库中存在的商品名字
List<String> list=new ArrayList<>();
{
list.add("珍珠奶茶");
list.add("黑糖珍珠奶茶");
list.add("芋泥波波奶茶");
list.add("柠檬水");
list.add("绿茶");
list.add("红茶");
}
@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 {
String keyWord = req.getParameter("keyWord");
//新建一个集合
List<String> ns=new ArrayList<>();
for (String n : list) {
if(n.contains(keyWord)) {
ns.add(n);
}
}
//设置编码
resp.setCharacterEncoding("utf-8");
//需要把结果告诉前台
PrintWriter out = resp.getWriter();
//需要将集合变成json
//1.需要获取转换对象
ObjectMapper mapper=new ObjectMapper();
//2.调用方法
String str = mapper.writeValueAsString(ns);
out.print(str);
}
}
主界面：index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input id="keyWord" name="keyWord" onkeyup="search()">
<ul id="list">
<script type="text/javascript">
function search(){
//得到输入框的值
let keyWord=$("#keyWord").val()
//发送到负责检索商品名称的servlet
$.get(
"search.do",
{keyWord},
(resp)=>{
//清空原来的选项
$("#list").empty()
//resp现在是从字符串变成了数组
for(let n of resp){//foreach
$("#list").append("<li>"+n+"</li>")
}
},
"json"
)
}
</script>
</body>
</html>感谢观看，下次再见