ajax不能执行

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>
					&nbsp;&nbsp;&nbsp;
				</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 + "]";
}


}
  1. ajax的代码不会执行,注释掉ajax部分才会提示点击了按钮。

  2. ajax代码打完之后偶尔会出现Syntax error on tokens, MethodHeaderName expected instead的错误,保存一下就又没了是为什么。http://img1.sycdn.imooc.com//climg/5ec62ccb094a50c307070370.jpg

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

http://img1.sycdn.imooc.com//climg/5ec62c44091ea83510000153.jpg

servlet就获取不到数据了,是因为数据并不是由ajax传递到servlet的吗还是因为我代码有问题。

4.关于项目有个小问题,http://img1.sycdn.imooc.com//climg/5ec62d4409a902ff05920043.jpg

这个功能应该用在哪里呢?我感觉页面上的功能基本上都快实现了,这个方法不知道应该在什么地方用

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,

1、同学AJAX代码中有错误。应该是$.ajax,中间有个点。data后面的冒号应该是英文冒号,data的值不需要用双引号括起来,searchContent变量没有定义,应该获得输入框的值。success方法中,图片样式值应该对双引号进行转义,属性名和属性值之间应该是冒号。

参考代码如下:

http://img1.sycdn.imooc.com//climg/5ec66a550912d42608710416.jpg

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

参考代码如下:

http://img1.sycdn.imooc.com//climg/5ec669e809be233f08620316.jpg

3、同学BookTypeInquiryServlet返回的是一个页面。同学可以通过提交表单实现图书查询功能。

4、根据图书ID来查询书籍信息和根据分类来查询书籍信息这两个功能,同学实现其中一个就可以了。

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师