ajax 无法获取json数据

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>

<html>

<head>

<title>图书后台管理</title>

$(function(){

$("#searchbtn").click(function(){

var searchContent=$("#searchContent").val();

$.ajax({

"url":"/homeworkregist_login/SearchBookByIDServlet",

"type":"get",

"data":{"searchContent":searchContent},

"dataType":"json",

"success":function(json){

console.log(json);

}

})

</script>

</head>

<body>

<nav>

<a href="bookList.jsp">图书信息管理</a>

</nav>

<nav>

</nav>

</div>

</header>

<div>

<h1>图书管理系统</h1>

<p>图书信息管理</p>

</div>

</section>

</div>

<input name="searchContent" class="form-control"

id="searchContent" placeholder="输入要查询的分类" style="width: 250px">

</div>

</form>

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<c:forEach items="${bookList }" var="book" varStatus="idx">

<td>${ide.index+1}</td>

<td>${book.bookId }</td>

<td>${book.bookName }</td>

<td>${book.category }</td>

<td><a

href="${pageContext.request.contextPath}/UpdateBookList?bookId=${book.bookId}">修改</a>

href="${pageContext.request.contextPath}/DelBookServlet?bookId=${book.bookId}">删除</a>

</td>

</tr>

</c:forEach>

</tbody>

</table>

</div>

</section>

</div>

</section>

</body>

</html>

package com.imooc.web.servlet;

import java.io.IOException;

import java.util.ArrayList;

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.web.model.Book;

import com.imooc.web.service.BookService;

import com.imooc.web.service.BookServiceImpl;

/**

* Servlet implementation class SearchBookByIDServlet

@WebServlet("/SearchBookByIDServlet")

public class SearchBookByIDServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public SearchBookByIDServlet() {

super();

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//获取参数searchContent内容

String searchContent=request.getParameter("searchContent");

//新建List对象

List list=new ArrayList();

//if(searchContent.substring(0, 4).equals("book")) {}

//如果参数是以book开头，说明参数是图书ID号，否则视为图书名

BookService bookservice=new BookServiceImpl();

//调用getBooksByCondition查询方法

Book book=bookservice.getBooksByCondition(searchContent);

list.add(book);

String json=JSON.toJSONString(list);

response.getWriter().println(json);

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doGet(request, response);

}

（1）BookList.jsp上的查询功能和添加了SearchBookByIDServlet，点击查询按钮后出现错误，无法接收数据

（2）请问后面接收到json数据后如何在页面显示出来呢，课程里的内容是告诉在空白页面显示，而目前的bookList.jsp 已经存在内容了，如何在已经有内容的网页显示接收到的json数据。请老师提供下思路和方法。谢谢

（3）其他代码请看我上个问题提供的代码

慕仰0394571 2020-02-17

源自：项目：登录注册功能 6-2 项目作业

收起

1回答

好帮手慕小班 2020-02-18 11:07:04

同学你好，1、点击查询按钮后出现错误

这里查看同学贴出代码，在BookList.jsp中，并没有出现无法接受数据的字样，但是没有没有正常接收到数据。检查代码，查询按钮注意需要是button按钮，而不能是submit，submit会在提交后刷新页面，所以建议在查询按钮中不要使用submit

2、在ajax中，我们是通过js代码来接收和处理参数的。js代码中的变量json也是一个集合。通过json[i]可以指代每一次循环中的那个book，所以我们可以使用json[i].bookId拿到当前book对象的id值，例如：

"success":function(json){
                    var content="";
                    for(var i=0;i<json.length;i++){
                        content=content+"<tr><td>"+(i+1)
                                +"</td><td>"+json[i].bookId
                                +"</td><td>"+json[i].bookname
                                +"</td><td>"+json[i].bookCategory
                                +"</td><td>￥"+json[i].price
                                +"</td><td><img src='img/"+json[i].bookCover+"'>"
                                +"</td><td><a href='${pageContext.request.contextPath }/updateBook.jsp?bookId="+json[i].bookId+"'>修改</a><a href='/deleteBook?bookId="+json[i].bookId+"'>删除</a>"
                                +"</td></tr>";
                        $("cont>tr").remove();
                    }
                    $("#cont").html(content);
                }

如上所示，是老师写的小例子，同学可以根据自己的具体属性名称以及标签名来书写自己具体的ajax展示内容。

如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~

收起回答

weixin_慕少0536252 #1

为什么在for循环中调用$("cont>tr").remove();那不是内容还没显示就被移除了吗？

2020-03-20 12:02:09
好帮手慕小班回复 weixin_慕少0536252 #2

同学你好，1、$("cont>tr").remove();是移除之前页面中的已经存在的表格内容。2、在循环中拼接的数据完成后，循环外再执行--》$("#cont").html(content); 数据写入页面中的操作。综上所述，$("cont>tr").remove()将数据移除，并不会影响循环执行完后的$("#cont").html(content); 数据写入。如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~

2020-03-20 17:43:33