【JavaScript】将的datetime-local的值转为Date型发送到服务器

datetime-local的格式


datetime-local的格式为YYYY-MM-DDTHH:mm:ss,注意日期和时间之间有一个T,这是ISO 8601的标准

不过,在Java后端,一般都是用Date类型接收时间,然后存入数据库。如果直接用Java的LocalDateTime接收,然后存入数据库,数据库会找不到和LocalDateTime类型对应的数据库类型

这时候需要将datetime-local转为Date类型。一种方式是在后端操作,需要在接收时间参数后进行格式转换,似乎可行。不过实际操作来看,如果用@RequestBody接收对象类型,那么这种方式不太可行。另一种方式就是在前端发送JSON给服务器之前,将之转为Date类型

实例


表单

表单中的日期时间控件命名id为startDate,用于在脚本中初始化该控件的时间,比当前时间多一个小时用于预定时间

也可以用value="YYYY-MM-DDTHH:mm:ss的格式,初始化日期时间控件

<form id="order">
    <table>
        <tr>
            <td>服务时间:</td>
            <td><input id="startDate" type="datetime-local" name="startDate"></td>
        </tr>
        <tr>
            <td>预付款:</td>
            <td><input name="advancePayment"></td>
        </tr>
        <tr>
            <td>支付方式:</td>
            <td>
                <select name="paymentMethod">
                    <option value="0">在线支付</option>
                    <option value="1">公司转账</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <button type="button" onclick="sendOrder()">添加订单</button>
            </td>
        </tr>
    </table>
</form>

脚本

脚本中最开始用比当前时间多一个小时的时间初始化日期时间控件,注意日期和时间之间的T

然后当点击按钮时,调用sendOrder()函数,先将表单中的日期时间控件的datetime-local的值转为Date类型。再将表单转为JSON发送到后端

<script>
    //设置表单中的初始时间,比当前时间多一小时
    var now = new Date();
    now.setHours(now.getHours() + 1);
    var str = now.getFullYear() + "-" + fix((now.getMonth() + 1), 2) + "-" + fix(now.getDate(), 2) + "T" + fix(now.getHours(), 2) + ":" + fix(now.getMinutes(), 2);
    $("#startDate").val(str);

    //将日期格式化为两位,不足补零
    function fix(num, length) {
        return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num;
    }

    //发送订单
    function sendOrder() {
        //将datetime-local转换为Date
        x = $("#startDate").val();
        now.setFullYear(parseInt(x.substring(0, 4)));
        now.setMonth(parseInt(x.substring(5, 7)) - 1);
        now.setDate(parseInt(x.substring(8, 10)));
        now.setHours(parseInt(x.substring(11, 13)));
        now.setMinutes(parseInt(x.substring(14, 16)));

        //获取表单数据,并序列化
        var formData = $("#order").serializeArray();

        //将序列化数据转为对象
        var formObject = {};
        for (var item in formData) {
            formObject[formData[item].name] = formData[item].value;
        }
        formObject.startDate = now;
        var formJSON = JSON.stringify(formObject);

        //发送JSON到服务器
        $.ajax({
            type: "POST",
            url: "<%=basePath%>/order/addOrder",
            contentType: "application/json",  //一定要设置这一行,很关键
            data: formJSON,
            datatype: "json",
            success: function (data) {
                alert(JSON.stringify(data));
            }
        });
    }
</script>
©️2020 CSDN 皮肤主题: 撸撸猫 设计师: 设计师小姐姐 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值