关于ajax的显示问题
<%@ page language="java" contentType="text/html; UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!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">
</head>
<body>
<header>
<div class="container">
<nav>
<a href="${pageContext.request.contextPath}/bookList.jsp">图书信息管理</a>
</nav>
<nav>
<a href="${pageContext.request.contextPath}/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}/SearchBook" method="post">
<div class="form-group" style="float: right;">
<div class="col-sm-offset-2 col-sm-10">
<button id="find" 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>
<c:forEach items="${applicationScope.bookList}" var="book"
varStatus="idx">
<tr id="tr1">
<td>${idx.index+1 }</td>
<td>${book.bookId }</td>
<td>${book.bookName }</td>
<td>${book.categoryName }</td>
<td>￥${book.price}</td>
<td><img src="${book.path }"></td>
<td><a
href="${pageContext.request.contextPath}/UpdateBook?bookId=${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="${pageContext.request.contextPath}/addBook.jsp"><button>新建</button></a>
</div>
</div>
</section>
<footer> copy@慕课网 </footer>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
url : "/Book-management/SearchBook",
type : "post",
data:{"searchContent":$("#searchContent").val()},
dataType : "json",
success : function(json) {
alert(json);
for (var i = 0; i < json.length; i++) {
var one = json[i];
$("find").click(function(){$("#tr1").append(
"<td>"+i+1+"</td>"+
"<td>"+one.bookId+"</td>"+
"<td>"+one.bookName+"</td>"+
"<td>"+one.categoryName+"</td>"+
"<td>￥"+one.price+"</td>"+
"<td><img src='"+one.path+"'></td>"+
"<td><a href='/Book-manngement/UpdateBook?bookId='"+one.bookId +">修改</a>"+
"<a href='/Book-manngement/DeleteBook?bookId='"+one.bookId +">删除</a></td>");})
}
}
})
})
</script>
</html>
***********************************************
package com.imooc.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.imooc.domain.book.Book;
import com.imooc.service.BookService;
import com.imooc.service.impl.BookServiceImpl;
/**
* 通过图书分类名称显示图书信息
* @author Administrator
*
*/
@WebServlet("/SearchBook")
public class SearchBook extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Book> bookList1=new ArrayList<Book>();
String catgoryName=request.getParameter("searchContent");
System.out.println(catgoryName);
List<Book> bookList=(List<Book>)request.getServletContext().getAttribute("bookList");
BookService bookService =new BookServiceImpl();
bookList1=bookService.getBooksByCategoryName(bookList, catgoryName);
String json=JSON.toJSONString(bookList1);
System.out.println("sb"+json);
response.getWriter().println(json);
// response.sendRedirect(request.getContextPath()+"/bookList.jsp");
// request.getRequestDispatcher("/bookList.jsp").forward(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星