ajax不生效
来源：6-2 项目作业
Wonwayshon
2020-10-31 16:17:47
我的ajax不生效，麻烦老师帮我看看
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="java.util.List,com.imooc.domain.Book" %>
<!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.min.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="#" 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" id="search-btn">查询</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="${bookList }" var="book" varStatus="idx">
<tr id="tr1">
<td>${idx.index+1 }</td>
<td>${book.bookId }</td>
<td>${book.bookName }</td>
<td>${book.bookCategory.categoryName }</td>
<td>￥${book.bookPrice }</td>
<td><img src="${book.bookCoverPath }"></td>
<td>
<a href="${pageContext.request.contextPath }/updateBook.jsp?oldBookId=${book.bookId }">修改</a>
<a href="${pageContext.request.contextPath }/deleteBook?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>
<script type="text/javascript">
$("#search-btn").onclick=function(){
$.ajax({
"url":"/searchBook",
"type":"post",
"data":"{searchContent:$('#searchContent').value}",
"dataType":"json",
"success":function(json){
$("#tbody>tr").remove();
var content="";
for(var i=0;i<json.length;i++){
content+="<tr id='tr1'><td>"+(i+1)+
"</td><td>"+json[i].getBookId()+
"</td><td>"+json[i].getBookName()+
"</td><td>"+json[i].getCategoryName()+
"</td><td>"+json[i].getBookPrice()+
"</td><td><img src="+json[i].getBookCoverPath()+">"+
"</td><td>"+
"<a href='${pageContext.request.contextPath }/updateBook.jsp?oldBookId=${book.bookId }'>修改</a>"+
"<a href='${pageContext.request.contextPath }/deleteBook?bookId=${book.bookId }'>删除</a>"+
"</td></tr>";
}
$("#tbody").html(content);
},
"error":function(){
alert("出现错误！");
}
})
}
</script>
</body>
</html>
package com.imooc.web.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.domain.Category;
import com.imooc.services.BookServiceImpl;
import com.imooc.services.CategoryServiceImpl;
@WebServlet("/searchBook")
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.getServletContext().getAttribute("bookList");
List<Category> categoryList=(List<Category>)request.getServletContext().getAttribute("categoryList");
BookServiceImpl bsi=new BookServiceImpl(bookList);
//获得搜索匹配到的Category列表
List<Category> resultCategoryList=CategoryServiceImpl.getCategoryListByString(categoryList, searchContent);
if(resultCategoryList==null) {
//未搜索到内容返回空
response.getWriter().println("");
}
//获得根据Category列表搜索匹配到的Book列表
List<Book> resultBookList=bsi.getBookListByCategoryList(resultCategoryList);
if(resultBookList==null) {
//未搜索到内容返回空
response.getWriter().println("");
}
//将搜索到书籍列表转换为Json发送
String resultJSONString=JSON.toJSONString(resultBookList);
System.out.println(resultJSONString);
response.getWriter().println(resultJSONString);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
2回答
-
同学你好，控制台没有输出，表示通过分类查询时，没有查询到该分类下的图书信息。
建议同学在如下位置处循环输出一下，查看该分类下是否存在图书信息。
如果运行控制台没有输出图书信息，表示该分类下没有图书信息。同学可以检查一下查询的方法是否正确。
如果同学的问题不能解决，建议同学将代码贴完整些，方便这边具体测试。代码可以贴在“我要回答”中，选择代码语言。
祝：学习愉快~
0h020-11-01 -
好帮手慕阿满
2020-10-31
同学你好，如下有输出语句，建议同学查看一下控制台是否有输出resultJSONString。
如果有表示返回值没有问题。
在如下Ajax中，不需要使用get方式获取属性，
直接使用属性名获取即可，例如：json[i].bookId，json[i].bookName。
建议同学修改一下再试试。如果还有问题，建议同学将Book类的代码也贴一下，方便这边测试。
0h020-10-31
相似问题