转账功能的实现

作为一个菜鸟中的菜鸟，对着模板感觉敲代码敲的挺起劲，可是面对这么一个简单的需求，自闭了…这个算是我的一篇总结，大佬请忽略。

要求：

1. 使用SSM框架
2. 要求页面上的转账金额为实时金额，动态刷新

实现过程：

1.搭建SSM框架及数据库的准备

2.代码实现

我们首先要从数据库拿到账户信息（name和money），然后展示到页面上。

@Controller
public class TransferController {
	
    @Autowired
    AccountService accountService;
    
    @RequestMapping(value = "/list")
    public String list(Model model) {
        Account jack = accountService.getAccountById(1);
        Account rose = accountService.getAccountById(2);

        model.addAttribute("Jack",jack);
        model.addAttribute("Rose",rose);

        return "index.jsp";
    }
}

然后页面接收数据，主要注意几个地方。

1. 页面中jquery的引用。
2. 前端JSP页面如何获取Controller传来的数据

ROSE:<input type="number" id="Rose" value="${Rose.money}"/>

如上所示，使用EL表达式可以获取到controller放在model中的对象，并从对象中取到money。
页面展示效果如下：

接下来，需要完成转账的操作，转账分为两步，Rose的减和Jack的加，这两个操作必须同时成功或者失败。
利用ajax向controller传递转账的数据。

	//Controller层代码
	@RequestMapping(value = "/justDo")
    @ResponseBody
    public String transfer(String money) {
        accountService.transferToJack(money);
        return "success";
    }

JSP页面的ajax

 <script type="text/javascript">
 		//转账按钮触发的onclick方法
        function doit() {

            var param = {"money":$("#num").val()};
            $.get("${pageContext.request.contextPath}/justDo",param,function (msg) {
                if (msg == "success") {
                    var a = $("#Rose").val() - $("#num").val();
                    var b = parseInt($("#Jack").val()) + parseInt($("#num").val());

                    $("#Rose").val(a);
                    $("#Jack").val(b);
                }
            })
        }
    </script>

通过触发事件来对两个< input >输入框来赋值实现JSP页面数据的实时更新，同时后台对数据库进行操作保持一致。
其中有一个JavaScript parseInt() 函数，下面是详细教程链接：
https://www.w3school.com.cn/jsref/jsref_parseInt.asp
这个方法解决了，使用+时，被当做是字符串拼接的问题。

到此，基本功能实现，思路就是如此。