利用bootbox.js写二次确认提交(以及数字转为中文数字)

页面文件

<#-- 页头 -->
<#assign currNav = "deposit">
<#assign title="网校充值">
<#include "/root/commons/header.ftl">

    <div class="container">

        <form id="depositForm" name="depositForm" role="form" action="/root/depositlog/${schoolId}/deposit" method="post">
          <div class="form-group">
            <label for="schoolId">网校ID</label>
            <input type="text" class="form-control" id="schoolId" name="schoolId" placeholder="例如,udemy" value="${school.schoolId!''}" readonly="readonly">
            <p class="help-block">全局唯一,不能和其他网校的ID相同</p>
          </div>
          <div class="form-group">
            <label for="name">网校名称</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="请填写网校名称" value="${school.name!''}" readonly="readonly">
          </div>

          <div class="form-group">
            <label for="duration">充值分钟数  <span id="chinaText" class="text-muted text-sm" style="margin-left:60px;font-size:12px;"> </span></label>
            <input type="number" class="form-control" id="duration" name="duration" placeholder="">
            <p class="help-block">单位:分钟</p>
          </div>
          <div class="form-group">
            <label for="amount">充值金额  <span id="moneyText" class="text-muted text-sm" style="margin-left:60px;font-size:12px;"> </span></label>
            <input type="text" class="form-control" id="amount" name="amount" placeholder="">
            <p class="help-block">单位:元</p>
          </div>
          <div class="form-group">
            <label for="note">备注</label>
            <input type="text" class="form-control" id="note" name="note" placeholder="">
          </div>          

        </form>

          <button  id="submitBtn" class="btn btn-primary">提交充值数据</button>

    </div> <!-- /container -->

<#-- 页脚开始 -->
<#include "/root/commons/footerBegin.ftl">

<script src="/resources/js/bootbox.js"></script>

<script>
    //在输入框内容变化的时候触发change
	  $("#duration").on('input',function(e){
		  var value=$("#duration").val();

		   $.get("/root/depositlog/input/change",{number:value},function(data){
			   $("#chinaText").text(data+" 分钟");
		   });
	  });

	  $("#amount").on('input',function(e){
		  var value=$("#amount").val();

		   $.get("/root/depositlog/input/change",{number:value},function(data){
			   $("#moneyText").text(data+" 元");
		   });
	  });

	  $("#submitBtn").click(function(){
	        var schoolId=$("#schoolId").val();
	        var name=$("#name").val();
	        var duration=$("#duration").val();
	        var amount=$("#amount").val();

	      	bootbox.dialog({
			  message: "<div id='schoolName'>网校名称:<span>"+name+"</span><span style='margin-left:10px'>schoolId-("+schoolId+")</span></div>"+
			           "<div>充值时长:<span>"+duration+" 分钟</span></div>"+
			           "<div>充值金额:<span>"+amount+" 元</span></div>",
			  title: "充值确认",
			  buttons: {
				    success: {
				      label: "确定",
				      className: "btn-success",
				      callback: function() {
				        document.depositForm.submit();
				      }
				    },
				   danger: {
				      label: "取消",
				      className: "btn-danger",
				      callback: function() {
				        return;
				      }
				   }
			  }
			});

	  });
</script>

<#-- 页脚结束 -->
<#include "/root/commons/footerEnd.ftl">

Java类文件

package com.school.web.controller.root;

import java.math.BigDecimal;
import java.nio.charset.Charset;
import java.util.Date;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.ServletRequestUtils;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.school.business.DepositLogManager;
import com.school.business.SchoolManager;
import com.school.domain.DepositLog;
import com.school.domain.Root;
import com.school.domain.School;
import com.school.stereotype.YesNoStatus;
import com.school.util.Constants;

/**
 * 充值管理的控制器。
 */
@Controller("rootDepositManagementController")
@RequestMapping("/root/depositlog")
public class DepositManagementController extends AbstractRootController {

    private static final Logger LOG = LoggerFactory.getLogger(DepositManagementController.class);

    @Autowired
    private SchoolManager schoolManager;

    @Autowired
    private DepositLogManager depositLogManager;

    /**
     * 充值表单。
     */
    @RequestMapping(value = "/{schoolId}/deposit", method = RequestMethod.GET)
    public ModelAndView depositForm(@PathVariable String schoolId, HttpServletRequest request) {

        // 网校信息
        School school = schoolManager.getSchool(schoolId);

        ModelAndView mav = this.createModelAndView(request);
        mav.setViewName("root/depositLog/deposit");
        mav.addObject("schoolId", schoolId);
        mav.addObject("school", school);
        return mav;
    }

    /**
     * 处理充值。
     */
    @RequestMapping(value = "/{schoolId}/deposit", method = RequestMethod.POST)
    public @ResponseBody String depositPost(@PathVariable String schoolId, HttpServletRequest request) {

        int duration = ServletRequestUtils.getIntParameter(request, "duration", 0);// 时长分钟数,单位:分钟
        double amount = ServletRequestUtils.getDoubleParameter(request, "amount", 0);// 价格
        String tradingNote = ServletRequestUtils.getStringParameter(request, "note", null); // 备注

        if (duration <= 0) {
            return "invalid duration";
        }

        if (amount < 0) {
            return "invalid amount";
        }

        // 当前管理员信息
        Root root = (Root) (request.getSession().getAttribute(Constants.ROOT_SESSION_NAME));

        // 交易名称
        String tradingName = schoolId + "充值" + duration + ",费用:" + amount + "元";

        // 充值信息
        DepositLog depositLog = new DepositLog();
        depositLog.setSchoolId(schoolId);
        depositLog.setTradingName(tradingName);
        depositLog.setTradingNote(tradingNote);
        depositLog.setDuration(duration);
        depositLog.setAmount(BigDecimal.valueOf(amount));
        depositLog.setOperator(root.getNickname());
        depositLog.setStatus(YesNoStatus.YES.getValue());
        depositLog.setDateAdded(new Date());
        depositLog.setLastModified(new Date());

        int rows = depositLogManager.addDepositLog(depositLog);
        LOG.info(tradingName + ",处理结果:" + rows);

        return "success";
    }

    /**
     * 查看最近100条充值记录。
     */
    @RequestMapping("/list")
    public ModelAndView depositLogs(HttpServletRequest request) {
        // 查询充值记录
        List<DepositLog> depositLogs = depositLogManager.getDepositLogs();

        ModelAndView mav = this.createModelAndView(request);
        mav.setViewName("root/depositLog/list");
        mav.addObject("depositLogs", depositLogs);
        return mav;
    }

    /**
     * 将数字转换成中文数字
     * @author Prosper
     * @throws UnsupportedEncodingException
     */
    @RequestMapping(value="/input/change", method = {RequestMethod.POST,RequestMethod.GET})
    public ResponseEntity<String> getCNint(HttpServletRequest request){
        HttpHeaders headers = new HttpHeaders();
        MediaType mediaType = new MediaType("text", "plain", Charset.forName("UTF-8"));
        //MediaType mediaType = new MediaType("application", "json", Charset.forName("UTF-8"));
        headers.setContentType(mediaType);
        //HttpStatus Yes=HttpStatus.OK;

        String str = request.getParameter("number");

        if("".equals(str) && str==null){
            return new ResponseEntity<String>("no",  headers, HttpStatus.OK);
        }else{
            Integer number = Integer.parseInt(str);
            String ri=intToZH(number);
            return new ResponseEntity<String>(ri,  headers, HttpStatus.OK);
        }

    }

    public String intToZH(int i){
        String[] zh = {"零", "一", "二", "三", "四", "五", "六", "七", "八", "九"};
        String[] unit = {"", "十", "百", "千", "万", "十", "百", "千", "亿", "十"};

        String str = "";
        StringBuffer sb = new StringBuffer(String.valueOf(i));
        sb = sb.reverse();
        int r = 0;
        int l = 0;
        for (int j = 0; j < sb.length(); j++)
        {
            /**
             * 当前数字
             */
            r = Integer.valueOf(sb.substring(j, j+1));

            if (j != 0)
                /**
                 * 上一个数字
                 */
                l = Integer.valueOf(sb.substring(j-1, j));

            if (j == 0)
            {
                if (r != 0 || sb.length() == 1)
                    str = zh[r];
                continue;
            }

            if (j == 1 || j == 2 || j == 3 || j == 5 || j == 6 || j == 7 || j == 9)
            {
                if (r != 0)
                    str = zh[r] + unit[j] + str;
                else if (l != 0)
                    str = zh[r] + str;
                continue;
            }

            if (j == 4 || j == 8)
            {
                str =  unit[j] + str;
                if ((l != 0 && r == 0) || r != 0)
                    str = zh[r] + str;
                continue;
            }
        }
        return str;
    }

}
时间: 2024-11-11 20:16:03

利用bootbox.js写二次确认提交(以及数字转为中文数字)的相关文章

利用node.js写一个后台服务器---express框架的搭建及使用

一.node.js+express框架的服务项目搭建 step1:创建一个项目目录:myApp step2:命令行进入该目录,执行: npm init 在命令执行过程中,会让你设置一个项目的入口文件(entry point),可以随意设置例如:index.js. 执行完毕后,会在项目中创建一个package.json的文件,这个文件就是用来管理项目中今后需要安装的一些模块或依赖. step3:安装express插件: npm install express --save step4:expres

原生JS写了一个小demo,根据输入的数字生成不同背景颜色的小方块儿~

昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方法. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text

使用bootbox.js(二级务必提交书面和数字到数字中国)

页面文件 <#-- 页头 --> <#assign currNav = "deposit"> <#assign title="网校充值"> <#include "/root/commons/header.ftl"> <div class="container"> <form id="depositForm" name="deposi

分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------

bootbox.js [v4.2.0]设置确认框 按钮语言为中文

Bootbox.js (http://bootboxjs.com/)是一个小型的 JavaScript 库用来创建简单的可编程对话框,基于 Twitter 的 Bootstrap 开发. 弹出确认框方法:bootbox.confirm(),此时 默认 语言为英文,弹出对话框 代码及效果如下: bootbox.confirm("确定删除此记录?", function(result) { if (result) { alert("ok"); }else{ alert(&

JS控制submit表单提交前进行预览和confirm确认提交

JS控制submit表单提交前进行预览和confirm确认提交. 我们经常会遇到这样的场景,某一个form表单提交前,想知道那些checkbox的内容被选中了,如果符合则提交,如果不符合,则取消提交,很简单的代码,我就不说了,直接上代码了. <script type="text/jscript"> $(document).ready(function() { //alert($("input[name='xinjiu']:checked").val())

Django框架进阶6 多对多三种创建方式, Ajax, Content-Type前后端传输数据编码格式, Ajax发送文件数据, django内置的序列化功能, Ajax结合sweetalert实现删除二次确认, 批量插入数据, 自定义分页器, ajax结合sweetalert实现删除二次确认

多对多三种创建方式 1.全自动(较为常用) class Book(models.Model): title = models.CharField(max_length=32) authors = models.ManyToManyField(to='Author') # orm就会自动帮你创建第三张表 class Author(models.Model): name = models.CharField(max_length=32) ''' 好处:第三张表自己创建 不足之处:第三张表无法扩展额外

js防止回车(enter)键提交表单

如何防止回车(enter)键提交表单,其实很简单,就一句话.onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里面就好了. 如果在页面中按Enter键会自动提交的话,可以设置返回值防止自动提交如<input id="q" name="q" type="text" onkeypress="javascript:return gosearch();&q

jquery.form.js(ajax表单提交)

Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started 一.准备工作 写一个表单: <form id="reg" action="123.php" method="post"> <p> <label for