【web】从数据库读取多条数据到前台

最新推荐文章于 2024-09-08 22:12:40 发布

原创最新推荐文章于 2024-09-08 22:12:40 发布 · 545 阅读

0 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一个使用Servlet和Ajax进行前后端数据交互的具体案例。通过一个展示订单信息的Servlet，实现了从数据库查询商品销售信息，并将数据以JSON格式返回给前端。前端则通过Ajax调用Servlet接口，获取并解析JSON数据，最终在页面上动态展示商品ID、价格和数量等信息。

servlet 代码实现：

package com.zzxtit.order;

import java.io.IOException;
import java.sql.SQLException;
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 org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.ResultSetHandler;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.google.gson.Gson;
import com.zzxtit.sys.GoodsSellInfor;
import com.zzxtit.util.DBUtil;

@WebServlet("/showorder.action")
public class ShowOrderServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request,response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//System.out.println("进入测试！！！");
		response.setContentType("text/html;charset=utf-8");
		QueryRunner qr = new QueryRunner(DBUtil.getDS());
		String sql ="select goods_id goodsId, price, count from room_consume_infor";
		ResultSetHandler<List<GoodsSellInfor>> rsh = new BeanListHandler<GoodsSellInfor>(GoodsSellInfor.class);
		try {
			List<GoodsSellInfor> gi = qr.query(sql, rsh);
			response.getWriter().write(new Gson().toJson(gi));
			//System.out.println(new Gson().toJson(gi));
			//System.out.println("测试成功！！！");
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	
}

注： List的使用

前台Ajax代码实现：

 <script type="text/javascript">
$(function(){
	$.ajax({
		url : "${ctxpath}/showorder.action",
		dataType : "json",
		type : "post",
		success:function(data){
			$("#goodsData").empty();
			$.each(data, function(index){
				var rowData = "<tr><td>" + data[index].goodsId + "</td><td>" + data[index].price + "</td><td>" + data[index].count + "</td></tr>";
				$("#goodsData").append(rowData);
			});
		}
	});
});

</script>