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

Bertha 。 2021-09-22 13:54 281阅读 0赞

记得要引入jQuery：

直接贴代码：

效果如下：

![70][]

## **后台写法的补充\_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，****Servlet****2.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);
    	}
    
    }

[70]: /images/20210920/d1865494311844d1ac009a30e61ebe25.png