ajax不能执行

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>
                    &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

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 + "]";
}
 
 
}
  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
您的移动学习伙伴

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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