ajax页面代码出现错误，麻烦老师看看
来源：6-2 项目作业
Wonwayshon
2020-11-01 11:00:36
老师我发现的问题是，ajax请求能发送但是：
1.后台接收到的数据为null，代码中ajax发送数据部分为"data":"{searchContent:$('#searchContent').value}"，$('#searchContent').value似乎获取不到值，这是为什么呢，该如何解决
2.在修改servlet之后成功返回一个修改后的json字符串[{"bookCategory":{"categoryId":"未搜索到数据","categoryName":"未搜索到数据"},"bookCoverPath":"","bookId":"book0001","bookName":"未搜索到数据","bookPrice":,"bookRemarks":""}]，页面却触发"error":function(){alert("出现错误！");弹出弹窗，是ajax当中哪里出错了呢，麻烦老师指点
页面代码和Servlet代码如下
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="java.util.List,com.imooc.domain.Book" %>
<!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">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<header>
<div class="container">
<nav>
<a href="bookList.jsp" >图书信息管理</a>
</nav>
<nav>
<a href="categoryList.jsp" >分类管理</a>
</nav>
</div>
</header>
<section class="banner">
<div class="container">
<div>
<h1>图书管理系统</h1>
<p>图书信息管理</p>
<p style="color:red;">${sessionScope.addBookMsg }</p>
</div>
</div>
</section>
<section class="main">
<div class="container">
<form class="form-horizontal" action="#" 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" id="search-btn">查询</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 id="tbody">
<c:forEach items="${bookList }" var="book" varStatus="idx">
<tr id="tr1">
<td>${idx.index+1 }</td>
<td>${book.bookId }</td>
<td>${book.bookName }</td>
<td>${book.bookCategory.categoryName }</td>
<td>￥${book.bookPrice }</td>
<td><img src="${book.bookCoverPath }"></td>
<td>
<a href="${pageContext.request.contextPath }/updateBook.jsp?oldBookId=${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="addBook.jsp"><button>新建</button></a>
</div>
</div>
</section>
<footer>
copy@慕课网
</footer>
<script type="text/javascript">
$("#search-btn").click(function(){
$.ajax({
"url":"searchBook",
"type":"post",
"data":"{searchContent:$('#searchContent').value}",
"dataType":"json",
"success":function(json){
$("#tbody>tr").remove();
var content="";
for(var i=0;i<json.length;i++){
content+="<tr id='tr1'><td>"+(i+1)+
"</td><td>"+json[i].bookId()+
"</td><td>"+json[i].bookName()+
"</td><td>"+json[i].categoryName()+
"</td><td>￥"+json[i].bookPrice()+
"</td><td><img src="+json[i].bookCoverPath()+">"+
"</td><td>"+
"<a href='${pageContext.request.contextPath }/updateBook.jsp?oldBookId=${book.bookId }'>修改</a>"+
"<a href='${pageContext.request.contextPath }/deleteBook?bookId=${book.bookId }'>删除</a>"+
"</td></tr>";
}
$("#tbody").html(content);
},
"error":function(){
alert("出现错误！");
}
})
})
</script>
</body>
</html>
package com.imooc.web.servlet;
import java.io.IOException;
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;
import com.imooc.domain.Category;
import com.imooc.services.BookServiceImpl;
import com.imooc.services.CategoryServiceImpl;
@WebServlet("/searchBook")
public class SearchBookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String searchContent=request.getParameter("searchContent");
if(searchContent==null || searchContent.equals("")) {
//未搜索到内容返回空
response.getWriter().println("[{\"bookCategory\":{\"categoryId\":\"未搜索到数据\",\"categoryName\":\"未搜索到数据\"},\"bookCoverPath\":\"\",\"bookId\":\"book0001\",\"bookName\":\"未搜索到数据\",\"bookPrice\":,\"bookRemarks\":\"\"}]");
return;
}
List<Book> bookList=(List<Book>)request.getServletContext().getAttribute("bookList");
List<Category> categoryList=(List<Category>)request.getServletContext().getAttribute("categoryList");
BookServiceImpl bsi=new BookServiceImpl(bookList);
//获得搜索匹配到的Category列表
List<Category> resultCategoryList=CategoryServiceImpl.getCategoryListByString(categoryList, searchContent);
if(resultCategoryList==null) {
//未搜索到内容返回空
response.getWriter().println("[{\"bookCategory\":{\"categoryId\":\"未搜索到数据\",\"categoryName\":\"未搜索到数据\"},\"bookCoverPath\":\"\",\"bookId\":\"book0001\",\"bookName\":\"未搜索到数据\",\"bookPrice\":,\"bookRemarks\":\"\"}]");
return;
}
//获得根据Category列表搜索匹配到的Book列表
List<Book> resultBookList=bsi.getBookListByCategoryList(resultCategoryList);
if(resultBookList==null) {
//未搜索到内容返回空
response.getWriter().println("[{\"bookCategory\":{\"categoryId\":\"未搜索到数据\",\"categoryName\":\"未搜索到数据\"},\"bookCoverPath\":\"\",\"bookId\":\"book0001\",\"bookName\":\"未搜索到数据\",\"bookPrice\":,\"bookRemarks\":\"\"}]");
return;
}
//将搜索到书籍列表转换为Json发送
String resultJSONString=JSON.toJSONString(resultBookList);
//System.out.println(resultJSONString);
response.getWriter().println(resultJSONString);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
2回答
-
同学你好，这里同学所描述的“搜索框内不输入内容直接点提交会弹窗错误”是指这里吗？
如果是，说明是执行了ajax，但没有进入到success，是因为同学定义的图书价格是double类型，而在json字符串中价格没有给值。修改如下：
这里同学也可以参考如下代码：
直接返回一个List集合，如果集合中有数据，则展示出这些数据，否则表示没有查询到数据
0 -
好帮手慕小脸
2020-11-01
同学你好，
1、click绑定事件有误，可参考如下修改：
2、1)获取属性值时不需要加括号。如下：
2）这里的修改删除等操作应更改为如下：
0h020-11-01
相似问题