ajax不能执行
bookList:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | <%@ 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 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积分~
来为老师/同学的回答评分吧