就送序列化问题，以及ajax拼接字符串问题

ajax查询走通了，但序列化出了问题，如下图，还有就是拼字符串有没有什么方法，或者规律，简直zz

//ajxa 根据分类查询book信息
	private void selectBook(HttpServletRequest request, HttpServletResponse response) throws IOException {
		//获取参数
		String categoryName = request.getParameter("categoryName");
		
		//调用业务层查询数据
		List<Books> list = booksService.findBookByCategory(categoryName);
		System.out.println("selectBook : list : " + list);
		//将集合序列化为json对象
		String json = JSON.toJSONString(list);
		System.out.println("selectBook : json : " + json);
		response.getWriter().println(json);
	}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
    <head>
    <%
		String basePath = request.getScheme() + "://" +request.getServerName() + ":" +request.getServerPort() + request.getContextPath();
	%>
        <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="<%=basePath%>/js/jquery-3.3.1.js"></script>
    </head>

    <body>
       <header>
            <div class="container">
                    <nav>
                            <a href="<%=basePath%>/BooksServlet?method=showAllBooks" >图书信息管理</a>
                    </nav>
                    <nav>
                            <a href="<%=basePath%>/CategoryServlet?method=showAllCategory" >分类管理</a>
                    </nav>
                   
            </div>
        </header>
        <section class="banner">
            <div class="container">
                <div>
                    <h1>图书管理系统</h1>
                    <p>图书信息管理</p>
                </div>
            </div>
        </section>
        <section class="main">


            <div class="container">
                
                <div class="form-group"  style="float: right;">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button id="searchContent" type="submit" class="btn btn-primary">查询</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="search"
                        placeholder="输入要查询的分类" style="width: 250px">
                    </div>
                </div>

                
           
            </div>
            <div class="container">

                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>图书编号</th>
                        <th>图书名称</th>
                        <th>分类</th>
                        <th>价格</th>
                        <th>图书封面</th>
                        <th>操作</th>

                    </tr>
                    </thead>
                    <tbody>
                        <c:forEach items="${bookList }" var="books">
                            <tr id="tr1">
                                <td>${books.bId }</td>
                                <td>${books.bookName}</td>
                                <td>${books.category.categoryName}</td>
                                <td>￥${books.price}</td>
                                <td><img src="${books.path}"></td>
                                <td>
								<a href="<%=basePath%>/BooksServlet?method=toUpdateBook&bId=${books.bId}">修改</a>
                                <a href="<%=basePath%>/BooksServlet?method=deleteBook&bId=${books.bId}">删除</a>
                                </td>
                                <!--在循环显示数据时，此处的book0001可以用EL表达式进行替换-->

                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </section>
        <section class="page">
            <div class="container">
                <div id="fatie">
                    <a href="<%=basePath%>/BooksServlet?method=toAddBooks"><button>新建</button></a>
                </div>
            </div>
        </section>
        <footer>
            copy@慕课网
        </footer>
    </body>
   <script type="text/javascript">
	//判断字符是否为空的方法
	function isEmpty(obj){
	    if(typeof obj == "undefined" || obj == null || obj == ""){
	        return true;
	    }else{
	        return false;
	    }
	}
	
	function myAjax(obj){
		$.ajax({
			"url" : "<%=basePath%>/BooksServlet",
			"data" : obj,
			"type" : "post",
			"dataType" : "json",
			"success" : function(json){
				var content = "";
				for(var i = 0;i < json.length;i ++){
					content = content
					+ "<tr>"
						+ "<td>" + json[i].bId + "</td>"
						+ "<td>" + json[i].bookName + "</td>"
						+ "<td>" + json[i].category.categoryName + "</td>"
						+ "<td>" + json[i].price + "</td>"
						+ "<td><img src=" + json[i].path + "></td>" 
						+ "<td>" 
						+ "<a href=<%=basePath%>/BooksServlet?method=toUpdateBook&bId=json[i].bId>修改</a>"
						+ "<a href=<%=basePath%>/BooksServlet?method=deleteBook&bId=json[i].bId>删除</a>"
						+ "</td>" 
					+ "</tr>";
					$("tbody>tr1").remove();
				}
				$("tbody").html(content);
			}
		});
	}
	
	$("#searchContent").click(function(){
		var categoryName = $("input[name='searchContent']").val();
		
		if(!isEmpty(categoryName)){
			var obj1 = {"method" : "selectBook","categoryName" : categoryName}
			myAjax(obj1);
		}
	});
</script>
</html>

慕尼黑7018117 2019-05-16

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

收起

2回答

芝芝兰兰回答被采纳获得+3积分 2019-05-17 17:10:02

同学你好。还是分开来说吧：

1、这个 "category":{"$ref":"$[0].category"}的出现并不是数据错误。而是FastJson的重复引用现象。在这里因为同学的两个categroy是同一个，就出现了$ref。

这个可以在解析时进行设置，改为

String json = JSON.toJSONString(list,SerializerFeature.DisableCircularReferenceDetect);

就不会出现$ref了。

2、在字符串拼接的时候：

1）"" 包裹后会被视为一个字符串对象，不会被JavaScript或者Java解析

2）加号+用来拼接字符串，所以+两边一定是字符串

3）在 "" 内如果要表达引号，可以使用 '' ，他们两者就像是父子关系。

4）<%= %>只要成对就好。在生成为页面之前，会被替换成对应的字符串，被拼入其中

例如：

html = html + "<h2>" + news.date + "&nbsp;" + news.source +"</h2>"

html = html + "<option value='" + ch.code +"'>" + ch.name + "</option>"

至于修改和删除之间的位置问题，可以使用<br/>换行，也可以将a标签设置id或class属性，使用CSS来改变效果。

如果解答了同学的疑问，望采纳~

祝学习愉快~

收起回答

慕尼黑7018117 提问者 #1

感谢码字，明白了。

2019-05-17 18:05:57

芝芝兰兰 2019-05-17 12:10:01

同学你好。下面来一条条解答你的疑惑：

1、这里的json解析为这样，得看同学的Books类是如何定义的，categroy属性是否声明为Category类型，Categroy类的属性是否好好定义了呢？

2、在JavaScript中拼接HTML代码也是常用的一种方法，根据获取的内容动态的拼接出不同的内容替换掉HTML的内容已经是较为便利的做法了，没有什么笨的。

如果还有疑问，可以继续提问。如果解答了同学的疑问，望采纳~

祝学习愉快~

收起回答

提问者慕尼黑7018117 #1

public class Books { private String bId; private String bookName; private Double price; private String description; private Category category; private String path; public class Category { private String cId; private String categoryName; 是分类类型的，根据分类名称查出来的list集合打印到控制台并没有什么问题，序列化之后的json对象打印后第一个也没问题，后面的category部分会出错，想知道纯粹是因为序列化过程出了问题，还是因为从页面传过来的数据本身就有问题. selectBook : list : [Books [bId=book0002, bookName=射雕英雄传, price=20.0, description=很不错, category=Category [cId=ca0002, categoryName=武侠类], path=/lib-mag-sys/upload/f1ee7cd75bf24ed9a5a9cd8ce5cbd53f.jpg], Books [bId=book0003, bookName=水浒传, price=50.0, description=很不错, category=Category [cId=ca0002, categoryName=武侠类], path=/lib-mag-sys/upload/6d336ee136244ff685c520cae4fc61b5.jpg]] selectBook : json : [{"bId":"book0002","bookName":"射雕英雄传","category":{"cId":"ca0002","categoryName":"武侠类"},"description":"很不错","path":"/lib-mag-sys/upload/f1ee7cd75bf24ed9a5a9cd8ce5cbd53f.jpg","price":20.0},{"bId":"book0003","bookName":"水浒传","category":{"$ref":"$[0].category"},"description":"很不错","path":"/lib-mag-sys/upload/6d336ee136244ff685c520cae4fc61b5.jpg","price":50.0}] 字符串拼接的问题，其实是我没有表述清楚，标签里没有属性的时候好弄，我想问的是拼接字符串的时候，有些特殊的符号（比如空格&nbsp；查出来的‘修改’‘删除’两个按钮之间完全没有空隙），标签里带有属性的时候，甚至像我的里面穿插有表达式的时候，引号该怎么用的问题，什么用双引号，什么用单引号，我在这上面浪费了太多时间。

2019-05-17 12:55:15