【javaweb】从数据库读取多条数据并求和 将结果送到前端html

sevlet代码实现

package com.zzxtit.system.servlet;

import java.io.IOException;
import java.sql.SQLException;

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.handlers.ScalarHandler;

import com.zzxtit.util.DBUtil;

@WebServlet("/getTotalIncome.action")
public class getTotalIncome extends HttpServlet{
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request,response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		String idCard = request.getParameter("idCard");
		
		//System.out.println("进入servlet");
		String sql = "select sum(consume_money) as sum_consume_money from  t_order";
		
		QueryRunner qr = new QueryRunner(DBUtil.getDS());
		
		try {
			
			Object obj = qr.query(sql, new ScalarHandler()); 
			String totalMoney = String.valueOf(obj);
			//System.out.println(totalMoney);
			response.getWriter().write(totalMoney);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}
	
	
}

注 :

(1) sql求和语句 select sum(consume_money) as sum_consume_money from  t_order

(2)注意ScalarHandler的使用

(3)前台 使用的ajax进入的servlet 所出使用response.getWriter().write(totalMoney);返回数据

(4)读取出来的数据是BigDecimal的格式,无法转为int格式的数据, 我们先将其转为String格式的数据,直接通过String类型的数据进行传递,直接将String类型的数据放到html的代码中。

 

前台ajax代码实现 :

$(function(){
		var sumMoney = 0;
		$.ajax({
			url : "${ctxpath}/getTotalIncome.action",
			type : "post",
			//dataType : "String",
			success : function(data){
				//alert("测试成功");
				//alert(data);
				//sumMoney = Number(data);
				//alert(sumMoney);
				//alert(data);
				document.getElementById("ordersum").innerHTML = data;
			},
			error : function(data){
				parseInt(data);
				alert(data);
			}
		})
	});

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于javaweb+vue的共享音乐网站源码+设计报告+sql数据库(Web前端框架实训) 该资源内项目源码是个人的课设,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到94.5分,放心下载使用! 该资源适合计算机相关专业(如人工智能、通信工程、自动化、软件工程等)的在校学生、老师或者企业员工下载,适合小白学习或者实际项目借鉴参考! 当然也可作为毕业设计、课程设计、课程作业、项目初期立项演示等。如果基础还行,可以在此代码基础之上做改动以实现更多功能。 一、基本要求 1、前端 根据本学期所学知识,使用Vue.js前端技术框架,结合动态Web开发技术,设计一个前后端分离的单页应用(SPA)项目: 共享音乐网站,项目包含注册和登录页面,以及音乐分类展示页面、音乐选择列表和播放页面(可选做功能:播放次数、评分、评论等功能),页面数据从服务器端接口获取。 2、服务器端 使用JSP技术,创建动态Web项目,提供数据录入/编辑界面,数据至少包括歌曲名称、演唱者、歌曲链接和歌曲收录入库时间等;后台数据库采用MySql,保存从页面输入的内容;设计数据访问接口,实现接收前端数据查询,并将查询结果提供给前端展示。在完成系统功能的基础上,撰写设计报告。 硬件准备: 1.安装有Microsoft window7/10 64操作系统计算机 2.配备互联网访问功能 软件准备: 1.操作系统:Microsoft Window7/10 32/64位 2.JDK8 3.Tomcat8 4.Eclipse/其他 5.Mysql VSCode 本次实训的项目是共享音乐网站的设计与实现,对于这个项目的意义是很大的,可以提供用户自行上传音乐到服务器,所有的用户享受音乐。 项目的开发需求包括了用户的注册登陆,收藏音乐,对音乐的播放量进行统计,给出排行榜信息,歌曲的播放和暂停,用户上传mp3文件,展示所有的歌单等等。 1.1 登陆: 用户在未登陆的状态下仅允许可以查看音乐,播放和浏览;当查看个人的歌单的时候或者收藏音乐时以及上传歌曲时,将弹出登陆框,若无账号,可以在窗口注册账号;登陆成功在页面展示个人的账号名称。 登陆需要验证个人账户的正确与否,只有与后端数据库匹配,才允许登陆完成。登陆异常会提示各类异常信息。 1.2 注册: 用户注册的时候提交数据到后端进行判断,符合条件的进行注册,并且转到登陆的页面。 信息填写缺少的,或者用户名存在的,可以提示相关的信息。 1.3 展示: 可以将所有的音乐进行展示,首页分类点击进去将本类型的所有音乐展示给用户。还包括个人歌单的展示,对展示的歌曲可以播放收藏等必要操作。 1.4 上传: 用户可以将自己想提交到服务器的歌曲进行上传,提供一个文件拖拽的框,对上传的文件进行获取演唱者和歌曲名称,将其添加到服务器和在数据库内写入该歌曲的信息,方便今后进行数据的播放等操作。 1.5 播放: 用户点击播放按钮可以正确的在数据库和服务器进行数据的获取,并且能在前端页面播放歌曲。随时切换歌曲播放。 1.6 收藏: 已经登陆的用户可以对喜欢的歌曲进行收藏,未登陆的用户先要求登陆再进行收藏。 1.7搜索: 用户在搜索框内进行查询与关键字有关的内容,包括包含歌曲名称或者歌手的,按照歌单的展示方法,在页面进行展示。 二、数据库设计 数据库需要保存个人账户信息,登陆注册的时候进行验证和修改;需要保存歌曲的信息,对歌曲的各类信息保存,对歌曲进行收藏。 数据库主要起到存储数据的功能,所以合理的数据库设计可以减少开发的难度。 为了实现数据库对歌曲的访问需要设置歌曲表,歌曲拥有类型,还需要一个类型表,个人信息的保存需要建立用户表,对歌曲进行收藏,需要设计收藏表。
可以使用JSP和JavaScript来实现从数据库查询多条数据,并将其动态添加到表格中。具体的步骤如下: 1. 在JSP页面中,使用Java代码从数据库中查询多条数据,并将其存储在一个List对象中。 2. 在JSP页面中,使用JavaScript创建一个空的HTML表格,并为表格添加表头。 3. 在JavaScript中使用for循环遍历List对象,将每一条数据动态添加到HTML表格中。 4. 最后将HTML表格添加到JSP页面的指定位置。 下面是一个简单的示例代码: ```jsp <%@ page import="java.sql.*" %> <% // 连接数据库并查询多条数据 Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb", "username", "password"); String sql = "SELECT * FROM mytable"; PreparedStatement ps = conn.prepareStatement(sql); ResultSet rs = ps.executeQuery(); List<String[]> dataList = new ArrayList<String[]>(); while (rs.next()) { String[] data = new String[3]; data[0] = rs.getString("col1"); data[1] = rs.getString("col2"); data[2] = rs.getString("col3"); dataList.add(data); } rs.close(); ps.close(); conn.close(); %> <!-- 在页面中创建一个空的表格 --> <table id="myTable"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> </tbody> </table> <!-- 使用JavaScript将数据动态添加到表格中 --> <script> var table = document.getElementById("myTable"); var tbody = table.getElementsByTagName("tbody")[0]; <% for (String[] data : dataList) { %> var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.innerText = '<%= data[0] %>'; var td2 = document.createElement("td"); td2.innerText = '<%= data[1] %>'; var td3 = document.createElement("td"); td3.innerText = '<%= data[2] %>'; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tbody.appendChild(tr); <% } %> </script> ``` 这个示例代码中使用了JSP和JavaScript来实现从数据库查询多条数据,并将其动态添加到HTML表格中。需要注意的是,这种方法存在一定的安全问题,因为在JSP中直接使用Java代码访问数据库可能会导致SQL注入等安全问题。因此,建议在实际开发中使用框架或工具来处理数据库操作,并采用安全的方式来保护应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值