Ajax的介绍和使用
什么是Ajax
实例(搜索关键字,出来下拉框)
我使用表格换掉了下拉框
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>绥彼岸</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
🔍<input id="keyWord" name="keyWord" οnkeyup="search()">
<ul id="list">
</ul>
<script>
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");
}
//json
//对象的字符串格式,json有固定的格式
//将对象变成json
//将json还原为对象
</script>
</body>
</html>
SearchServlet
package com.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
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 java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/search.do")
public class SearchServlet extends HttpServlet {
//数据库中存在的商品名字
List<String> list = new ArrayList<String>();
{
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 {
//去数据库查询 select * from goods where name like '%key%'
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.println(str);
}
}
效果如下(页面放大400%):