ajax查询问题
后台没有报错，但每次输完查询内容点击查询按钮，页面只刷新没有筛选查询内容，还是原来的数据，麻烦老师看看是哪里出了问题
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书后台管理</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="container">
<nav>
<a href="bookList.jsp">图书信息管理</a>
</nav>
<nav>
<a href="categoryList.jsp">分类管理</a>
</nav>
</div>
</header>
<section class="banner">
<div class="container">
<div>
<h1>图书管理系统</h1>
<p>图书信息管理</p>
</div>
</div>
</section>
<section class="main">
<div class="container">
<form class="form-horizontal" action="${pageContext.request.contextPath}/SearchBookServlet" method="post">
<div class="form-group" style="float: right;">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">查询</button>
</div>
</div>
<div class="form-group" style="float: right; width: 300px;">
<div class="col-sm-8">
<input name="searchContent" class="form-control"
id="searchContent" placeholder="输入要查询的分类" style="width: 250px">
</div>
</div>
</form>
</div>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>序号</th>
<th>图书编号</th>
<th>图书名称</th>
<th>分类</th>
<th>价格</th>
<th>图书封面</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<c:forEach items="${sessionScope.bookList }" var="bl"
varStatus="idx">
<tr id="tr1">
<td>${idx.index+1}</td>
<td>${bl.bookId}</td>
<td>${bl.bookName}</td>
<td>${bl.categoryName}</td>
<td>￥${bl.bookPrice}</td>
<td><img src="${bl.bookPicture}"></td>
<td><a
href="${pageContext.request.contextPath}/updateBook.jsp?bookId=${bl.bookId}">修改</a>
<a
href="${pageContext.request.contextPath}/DeleteBookServlet?bookId=${bl.bookId}">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</section>
<section class="page">
<div class="container">
<div id="fatie">
<a href="addBook.jsp"><button>新建</button></a>
</div>
</div>
</section>
<footer> copy@慕课网 </footer>
</body>
<!-- js的代码编写在</body>结束标签的下面，
因为页面的加载顺序是从上到下的顺序进行加载的，
避免 js 代码操作 HTML 元素时，HTML 元素还未载入而失效
-->
<script type="text/javascript">
$("selector.submit").click(
function() {
$.ajax({
"url" : "/bookSystem/SearchBookServlet",
"type" : "get",
"data" : {
"searchContent" : $("input[name='searchContent']").val()
},
"dataType" : "json",
"success" : function(json) {
$("#tbody").empty();//将tbody的元素内容清空
if (json.length == 0) {
return;
alert("没有数据");
}
console.log(json);
for (var n = 0; n < json.length; n++) {
$("tbody").append(
"<tr id=\"tr1\">" +
"<td>" + (n + 1) + "</td>" +
"<td>" + json[n].bookId + "</td>" +
"<td>" + json[n].bookName + "</td>"+
"<td>"+ json[n].categoryName+ "</td>" +
"<td>" + json[n].bookPrice+ "</td>" +
//ajax代码中获取json中的图片属性，要添加.cover
"<td><img src="+json[n].cover +"></td>"+
"<td><a href=\"updateBook.jsp?bookId="+ json[n].bookId+ "\">修改</a>" +
"<a href=\"DeleteBookServlet?bookId="+ json[n].bookId+ "\">删除</a></td>")
}
}
})
});
</script>
</html>
package com.imooc.servlet;
import java.io.IOException;
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.alibaba.fastjson.JSON;
import com.imooc.domain.Book;
import com.imooc.service.impl.BookServiceImpl;
@WebServlet("/SearchBookServlet")
public class SearchBookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String searchContent=request.getParameter("searchContent");
List<Book> bookList=(List<Book>)request.getSession().getAttribute("bookList");
BookServiceImpl bsi=new BookServiceImpl();
List<Book>searchlist=bsi.getBookByCondition(searchContent);
String json=JSON.toJSONString(searchlist);
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(json);
response.sendRedirect(request.getContextPath()+"/bookList.jsp");
// request.getRequestDispatcher("/bookList.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
package com.imooc.service.impl;
import java.util.ArrayList;
import java.util.List;
import com.imooc.domain.Book;
//图书信息处理类
public class BookServiceImpl {
// 描述图书信息:
private static final List<Book> myBook = new ArrayList<Book>();
// 获取所有图书
public List<Book> getBooks() {
return myBook;
}
// 添加图书信息:
public void addBook(Book book) {
myBook.add(book);
}
// 修改图书信息
public void updateBook(Book book) {
deleteBook(book.getBookId());
myBook.add(book);
}
// 删除图书信息
public void deleteBook(String bookId) {
for (Book book : myBook) {
if (book.getBookId().equals(bookId)) {
myBook.remove(book);
break;
}
}
}
// 根据图书ID来查询书籍信息:
public Book getBookIdByCondtion(String bookId) {
for (Book books : myBook) {
if (books.getBookId().equals(bookId)) {
return books;
}
}
return null;
}
// 根据分类来查询书籍信息:
public List<Book> getBookByCondition(String categoryName) {
List<Book> bookList = new ArrayList<Book>();
for (Book books : myBook) {
if (books.getCategoryName().equals(categoryName)) {
bookList.add(books);
}
}
return bookList;
}
}
正在回答
同学你好，
1、ajax传入的参数名为searchWord，则在获取参数是也应该是searchWord，具体如下：
2、获取值的$编写错了，具体如下：
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~
老师，我修改了click，但点击查询还是没有反应，以下是详细代码，麻烦老师看看出了什么问题
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书后台管理</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="container">
<nav>
<a href="bookList.jsp">图书信息管理</a>
</nav>
<nav>
<a href="categoryList.jsp">分类管理</a>
</nav>
</div>
</header>
<section class="banner">
<div class="container">
<div>
<h1>图书管理系统</h1>
<p>图书信息管理</p>
</div>
</div>
</section>
<section class="main">
<div class="container">
<form id="search" class="form-horizontal" action="${pageContext.request.contextPath}/SearchBookServlet" method="post">
<div class="form-group" style="float: right;">
<div class="col-sm-offset-2 col-sm-10">
<!-- 类型submit会在提交后自动刷新页面,所以对应ajax查询到的数据会在刷新后消失 -->
<button type="button" id="find" class="btn btn-primary">查询</button>
</div>
</div>
<div class="form-group" style="float: right; width: 300px;">
<div class="col-sm-8">
<input name="searchContent" class="form-control"
id="searchContent" placeholder="输入要查询的分类" style="width: 250px">
</div>
</div>
</form>
</div>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>序号</th>
<th>图书编号</th>
<th>图书名称</th>
<th>分类</th>
<th>价格</th>
<th>图书封面</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
<c:forEach items="${sessionScope.bookList }" var="bl"
varStatus="idx">
<tr id="tr1">
<td>${idx.index+1}</td>
<td>${bl.bookId}</td>
<td>${bl.bookName}</td>
<td>${bl.categoryName}</td>
<td>￥${bl.bookPrice}</td>
<td><img src="${bl.bookPicture}"></td>
<td><a
href="${pageContext.request.contextPath}/UpdateJumpServlet?bookId=${bl.bookId}">修改</a>
<a
href="${pageContext.request.contextPath}/DeleteBookServlet?bookId=${bl.bookId}">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</section>
<section class="page">
<div class="container">
<div id="fatie">
<a href="addBook.jsp"><button>新建</button></a>
</div>
</div>
</section>
<footer> copy@慕课网 </footer>
</body>
<!-- js的代码编写在</body>结束标签的下面，
因为页面的加载顺序是从上到下的顺序进行加载的，
避免 js 代码操作 HTML 元素时，HTML 元素还未载入而失效
-->
<script type="text/javascript">
$("#find").click(function(){
$.ajax({
"url":"${pageContext.request.contextPath}/SearchBookServlet",
"type":"post",
"data":{"searchWord":$("#searchContent").val()},
"dataType":"json",
"success":function(json){
var content="";
for(var i=0;i<json.length;i++){
content=content+"<tr><td>"+(i+1)+"</td><td>"+json[i].bookId+"</td><td>"+json[i].bookName+"</td><td>"+json[i].categoryName+"</td><td>"+json[i].bookPrice+"</td><td> <a href='${pageContext.request.contextPath}/updateBook.jsp?bookId="+json[i].bookId+"'>修改</a><a href='${pageContext.request.contextPath}/DeleteBookServlet?bookId="+json[i].bookId+"'>删除</a></td></tr>";
$("#tb>tr").remove();
}
$("#tb").html(content);
}
});
})
</script>
</html>
package com.imooc.servlet;
import java.io.IOException;
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.alibaba.fastjson.JSON;
import com.imooc.domain.Book;
import com.imooc.service.impl.BookServiceImpl;
@WebServlet("/SearchBookServlet")
public class SearchBookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String searchContent=request.getParameter("searchContent");
List<Book> bookList=(List<Book>)request.getSession().getAttribute("bookList");
BookServiceImpl bsi=new BookServiceImpl();
List<Book>searchlist=bsi.getBookByCondition(searchContent);
String json=JSON.toJSONString(searchlist);
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(json);
response.sendRedirect(request.getContextPath()+"/bookList.jsp");
// request.getRequestDispatcher("/bookList.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
老师，这是用了button后的代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书后台管理</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<header>
<div class="container">
<nav>
<a href="bookList.jsp">图书信息管理</a>
</nav>
<nav>
<a href="categoryList.jsp">分类管理</a>
</nav>
</div>
</header>
<section class="banner">
<div class="container">
<div>
<h1>图书管理系统</h1>
<p>图书信息管理</p>
</div>
</div>
</section>
<section class="main">
<div class="container">
<form id="search" class="form-horizontal" action="${pageContext.request.contextPath}/SearchBookServlet" method="post">
<div class="form-group" style="float: right;">
<div class="col-sm-offset-2 col-sm-10">
<!-- 类型submit会在提交后自动刷新页面,所以对应ajax查询到的数据会在刷新后消失 -->
<button type="button" id="find" class="btn btn-primary">查询</button>
</div>
</div>
<div class="form-group" style="float: right; width: 300px;">
<div class="col-sm-8">
<input name="searchContent" class="form-control"
id="searchContent" placeholder="输入要查询的分类" style="width: 250px">
</div>
</div>
</form>
</div>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>序号</th>
<th>图书编号</th>
<th>图书名称</th>
<th>分类</th>
<th>价格</th>
<th>图书封面</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
<c:forEach items="${sessionScope.bookList }" var="bl"
varStatus="idx">
<tr id="tr1">
<td>${idx.index+1}</td>
<td>${bl.bookId}</td>
<td>${bl.bookName}</td>
<td>${bl.categoryName}</td>
<td>￥${bl.bookPrice}</td>
<td><img src="${bl.bookPicture}"></td>
<td><a
href="${pageContext.request.contextPath}/updateBook.jsp?bookId=${bl.bookId}">修改</a>
<a
href="${pageContext.request.contextPath}/DeleteBookServlet?bookId=${bl.bookId}">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</section>
<section class="page">
<div class="container">
<div id="fatie">
<a href="addBook.jsp"><button>新建</button></a>
</div>
</div>
</section>
<footer> copy@慕课网 </footer>
</body>
<!-- js的代码编写在</body>结束标签的下面，
因为页面的加载顺序是从上到下的顺序进行加载的，
避免 js 代码操作 HTML 元素时，HTML 元素还未载入而失效
-->
<script type="text/javascript">
$("#find").onclick=function(){
$.ajax({
"url":"${pageContext.request.contextPath}/SearchBookServlet",
"type":"post",
"data":{"searchWord":$("#searchContent").val()},
"dataType":"json",
"success":function(json){
var content="";
for(var i=0;i<json.length;i++){
content=content+"<tr><td>"+(i+1)+"</td><td>"+json[i].bookId+"</td><td>"+json[i].bookName+"</td><td>"+json[i].categoryName+"</td><td>"+json[i].bookPrice+"</td><td> <a href='${pageContext.request.contextPath}/updateBook.jsp?bookId="+json[i].bookId+"'>修改</a><a href='${pageContext.request.contextPath}/DeleteBookServlet?bookId="+json[i].bookId+"'>删除</a></td></tr>";
$("#tb>tr").remove();
}
$("#tb").html(content);
}
});
}
</script>
</html>
但点击查询还是什么反应都没有，麻烦老师看下是什么问题，谢谢老师
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星