后台的json数据在前台用ajax循环表格显示

最新推荐文章于 2024-08-17 23:14:52 发布

米斯特俞

最新推荐文章于 2024-08-17 23:14:52 发布

阅读量8.5k

点赞数 16

分类专栏：我的疑难杂症解决方案文章标签：后台的json数据在前台用ajax循环显示

本文链接：https://blog.csdn.net/weixin_40570675/article/details/81774942

版权

我的疑难杂症解决方案专栏收录该内容

2 篇文章 0 订阅

订阅专栏

后台的json数据在前台用ajax循环表格显示

记得要引入jQuery：

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

直接贴代码：

<script type="text/javascript">
        $.ajax({
            type:"get",
            url:"/doShowBook",
            dataType:"json",
            success:function (data) {
                $(data).each(
                    function (i, values) {
                        $("#list").append(
                            "<tr><td>"+values.bookid+"</td>"
                            +"<td><a href='getBookByname?name='>"+values.bookname+"</ta></td>"
                            +"<td>"+values.price+"</td>"
                            +"<td>"+values.author+"</td>"
                            +"<td>"+values.pic+"</td>"
                            +"<td>"+values.publish+"</td></tr>"
                        );

                    }
                );
            },
        })
    </script>
<table class="table table-bordered table-hover table-condensed">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>书名</th>
                    <th>价格</th>
                    <th>作者</th>
                    <th>封面</th>
                    <th>出版社</th>
                </tr>
                </thead>
                <tbody id="list"></tbody>
</table>

效果如下：

后台写法的补充_20191012

book实体类：（注意字段名和前台有点不一样，注意修改）

public class Book {
	private int bookId;
	private String bookName;
	private String bookPrice;
	private String author;
	
	public int getBookId() {
		return bookId;
	}
	public void setBookId(int bookId) {
		this.bookId = bookId;
	}
	public String getBookName() {
		return bookName;
	}
	public void setBookName(String bookName) {
		this.bookName = bookName;
	}
	public String getBookPrice() {
		return bookPrice;
	}
	public void setBookPrice(String bookPrice) {
		this.bookPrice = bookPrice;
	}
	public String getAuthor() {
		return author;
	}
	public void setAuthor(String author) {
		this.author = author;
	}
	
}

servlet:（这里用的是Servlet3.0,直接用注解@WebServlet("/doShowBook")来写url，Servlet2.5的话要在web.xml中配）

@WebServlet("/doShowBook")
public class JsonTestServlet extends HttpServlet {

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置编码
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");
		response.setCharacterEncoding("utf-8");
		
        //向book实体类中添加模拟数据
		Book book1 = new Book();
		book1.setBookId(1);
		book1.setBookName("xxx");
		book1.setBookPrice("123");
		book1.setAuthor("张三");
		Book book2 = new Book();
		book2.setBookId(2);
		book2.setBookName("java");
		book2.setBookPrice("12");
		book2.setAuthor("李四");
		Book book3 = new Book();
		book3.setBookId(3);
		book3.setBookName("python");
		book3.setBookPrice("13");
		book3.setAuthor("赵六");
		
		List<Book> bookList = new ArrayList<>();
		bookList.add(book1);
		bookList.add(book2);
		bookList.add(book3);
		//转成json
		Gson gson = new Gson();
		String jsondata = gson.toJson(bookList);
        //输出
		response.getWriter().write(jsondata);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}