ajax点击查询没有作用
bookList.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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.3.1.js"></script>
<script type="text/javascript">
function change() {
$.ajax({
"url" : "${pageContext.request.contextPath}/SearchBookServlet",
"type" : "post",
"data" : {
'id' : $("#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].bName
+ "</td><td>"
+ json[i].category
+ "</td><td>"
+ json[i].price
+ "</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>";
$("#cont>tr").remove();
}
$("#cont").html(content);
}
});
}
</script>
</head>
<body>
<header>
<div class="container">
<nav>
<a href="bookList.html">图书信息管理</a>
</nav>
<nav>
<a href="categoryList.html">分类管理</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="/searchBook" method="post">
<div class="form-group" style="float: right;">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-primary" onclick="change()">查询</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>
<c:forEach items="${books }" var="book" varStatus="idx">
<tr id="tr1">
<td>${idx.index+1}</td>
<td>book${book.bookId }</td>
<td>${book.bName }</td>
<td>${book.category }</td>
<td>￥${book.price }</td>
<td><img src="${book.imgPath }" style="width:160px;height:90px;"></td>
<td><a href="updateBook.jsp?bookId=${book.bookId }">修改</a>
<a href="${pageContext.request.contextPath }/DeleteBookServlet?bookId=${book.bookId }">删除</a></td>
<!--在循环显示数据时，此处的book0001可以用EL表达式进行替换-->
</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>
</html>SearchBookServlet
package com.linmin.web.servlet;
import java.io.IOException;
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.alibaba.fastjson.JSON;
import com.linmin.domain.Book;
import com.linmin.service.BookService;
import com.linmin.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 id = request.getParameter("id");
BookService bs = new BookServiceImpl();
List<Book> list = new ArrayList<Book>();
//查询的是图书编号
if(id != null && id.indexOf("book")!= -1) {
Book book = bs.getBooksByID(id);
list.add(book);
}else {
list = bs.getBooksByCategory(id);
}
String json = JSON.toJSONString(list);
System.out.println(json);
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(json);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}BookServiceImpl
package com.linmin.service.impl;
import java.util.ArrayList;
import java.util.List;
import com.linmin.domain.Book;
import com.linmin.service.BookService;
public class BookServiceImpl implements BookService {
private static final List<Book> books = new ArrayList<Book>();
/**
* 添加图书信息
*/
@Override
public void addBook(Book book) {
// 遍历图书列表，查询该图书是否已存在
for (Book b : books) {
// 该图书已存在，不执行添加
if (b.getBookId().equalsIgnoreCase(book.getBookId())) {
return;
}
}
// 该图书不存在，添加该图书到列表
books.add(book);
}
/**
* 修改图书信息
*/
@Override
public void updateBook(Book book) {
// 遍历图书列表，查询该图书是否存在
for (Book b : books) {
// 该图书存在，执行修改
if (b.getBookId().equalsIgnoreCase(book.getBookId())) {
b.setbName(book.getbName());
b.setCategory(book.getCategory());
b.setImgPath(book.getImgPath());
b.setPrice(book.getPrice());
b.setRemark(book.getRemark());
return;
}
}
return;
}
/**
* 删除图书信息
*/
@Override
public void deleteBook(String bookId) {
// 遍历图书列表，查询该图书是否存在
for (Book b : books) {
// 该图书存在，执行删除
if (b.getBookId().equalsIgnoreCase(bookId)) {
books.remove(b);
return;
}
}
return;
}
/**
* 根据图书ID来查询书籍信息
*/
@Override
public Book getBooksByID(String bookID) {
// 遍历图书列表，查询该图书是否存在
for (Book b : books) {
// 该图书存在
if (b.getBookId().equalsIgnoreCase(bookID)) {
return b;
}
}
return null;
}
/**
* 根据分类来查询书籍信息
*/
@Override
public List<Book> getBooksByCategory(String catgoryName) {
//创建该类图书列表
List<Book> cbooks = new ArrayList<Book>();
// 遍历图书列表，查询该类别图书是否存在
for (Book b : books) {
// 该类图书存在，添加到类图书列表中
if (b.getCategory().equalsIgnoreCase(catgoryName)) {
cbooks.add(b);
}
}
return cbooks;
}
public List<Book> getBooks(){
return books;
}
}29
收起
正在回答
2回答
同学你好，测试bookList.jsp页面，在ajax请求中，$("#cont").html(content); 中$("#cont")并没有正确获取到对应元素，查看页面中并没有id为cont的元素，建议同学在对应的tbody标签中添加对应的id
如上所示，修改后再来试一下。
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~
相似问题
ajax查询问题
50
0
6
关于ajax的显示问题
38
0
4
查询功能点击后没有效果
16
0
3
前面演示SQL下载界面，跟SQL查询界面不一样
0
0
2
老师，我的查询好像用不了，是哪里出错了呢？
34
0
10
登录后可查看更多问答，登录/注册
2. 从网页搭建入门JavaWeb
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星