ajax不能执行
bookList:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta charset="UTF-8">
<title>图书后台管理</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function query(){
alert("按钮");
$("#tr1").empty();
$ajax({ //jquery提供的ajax核心方法
//发送请求地址
"url":"${pageContext.request.contextPath}/BookTypeInquiryServlet",
//请求类型
"type":"post",
//向服务器传递的参数
"data":"{"searchContent":searchContent}",
//服务响应的数据类型
"dataType":"list",
//接收响应时的处理函数
"success":"function(list){
//遍历传回来的list文件格式化为html给予页面显示
for(var i = 0;i<session.list.length;i++){
$("#tr1").append("<td>"+session.list[i].bookid+"</td>");
$("#tr1").append("<td>"+session.list[i].bookname+"</td>");
$("#tr1").append("<td>"+session.list[i].booktype+"</td>");
$("#tr1").append("<td>"+list[i].bookprice+"</td>");
$("#tr1").append("<td><img src="+list[i].bookimage+" weith="160" height="90"></td>");
$("#tr1").append("<td><a href="+list[i].bookid+">修改</a>");
$("#tr1").append("<a href="+list[i].bookid+">删除</a> </td>");
}
}
});
}
</script>
<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}/BookTypeInquiryServlet"
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="query()">查询</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="num">
<tr id="tr1">
<td>${num.index+1}</td>
<td>${book.bookid }</td>
<td>${book.bookname }</td>
<td>${book.booktype}</td>
<td>${book.bookprice }</td>
<td><img src="${book.bookimage } " weith="160" height="90"></td>
<td><a
href="${pageContext.request.contextPath}/updateBook.jsp?Bookid=${book.bookid }">修改</a>
<a
href="${pageContext.request.contextPath}/BookRemoveServlet?bookId=${book.bookid}">删除</a>
</td>
</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>
</html>BookTypeInwuiryservlet.java
package com.andreas.web.servlet;
import java.io.IOException;
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.andreas.service.BookService;
import com.andreas.service.impl.BookServiceImpl;
/**
* Servlet implementation class BookTypeInquiryServlet
*/
@WebServlet("/BookTypeInquiryServlet")
public class BookTypeInquiryServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public BookTypeInquiryServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取数据
String BBCN = request.getParameter("searchContent");//BBCN :BookByContentNumber
//将数据交给servlet处理
BookService bookservice = new BookServiceImpl();
bookservice.getBooksByCatgoryName(BBCN);
//返回数据
request.getSession().setAttribute("inquiryData",BookServiceImpl.getInquirybook());
request.getRequestDispatcher("/bookList.jsp").forward(request, response);
doGet(request, response);
}
}BookServiceImpl.java
package com.andreas.domain;
public class Book {
private String bookid;
private String bookname;
private String booktype;
private String bookprice;
private String bookimage;
private String remarks;
public String getBookid() {
return bookid;
}
public void setBookid(String bookid) {
this.bookid = bookid;
}
public String getBookname() {
return bookname;
}
public void setBookname(String bookname) {
this.bookname = bookname;
}
public String getBooktype() {
return booktype;
}
public void setBooktype(String booktype) {
this.booktype = booktype;
}
public String getBookprice() {
return bookprice;
}
public void setBookprice(String bookprice) {
this.bookprice = bookprice;
}
public String getBookimage() {
return bookimage;
}
public void setBookimage(String bookimage) {
this.bookimage = bookimage;
}
public String getRemarks() {
return remarks;
}
public void setRemarks(String remarks) {
this.remarks = remarks;
}
public Book(){
}
@Override
public String toString() {
return "Book [bookid=" + bookid + ", bookname=" + bookname + ", booktype=" + booktype + ", bookprice=" + bookprice
+ ", bookimage=" + bookimage + ", remarks=" + remarks + "]";
}
}ajax的代码不会执行,注释掉ajax部分才会提示点击了按钮。
ajax代码打完之后偶尔会出现Syntax error on tokens, MethodHeaderName expected instead的错误,保存一下就又没了是为什么。

servlet中获取到的数据是Ajax部分传过去的还是直接从jsp页面获取到的?我尝试注释掉

servlet就获取不到数据了,是因为数据并不是由ajax传递到servlet的吗还是因为我代码有问题。
4.关于项目有个小问题,
这个功能应该用在哪里呢?我感觉页面上的功能基本上都快实现了,这个方法不知道应该在什么地方用
正在回答
同学你好,
1、同学AJAX代码中有错误。应该是$.ajax,中间有个点。data后面的冒号应该是英文冒号,data的值不需要用双引号括起来,searchContent变量没有定义,应该获得输入框的值。success方法中,图片样式值应该对双引号进行转义,属性名和属性值之间应该是冒号。
参考代码如下:

2、同学可以将代码改为点击查询时提交form表单。
参考代码如下:

3、同学BookTypeInquiryServlet返回的是一个页面。同学可以通过提交表单实现图书查询功能。
4、根据图书ID来查询书籍信息和根据分类来查询书籍信息这两个功能,同学实现其中一个就可以了。
如果我的回答解决了你的疑惑,请采纳!祝学习愉快!
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手,到Java Web基础,前后端结合助你完成Java Web小白的蜕变!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星