版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mm_hello11/article/details/82941432
项目中的需求是一个input中既要有日期又要有时间,百度了input的属性有个type=datetime-local,会生成如下样式,满足了需求:
但是提交数据时,提交的数据格式后台接收出了问题,解析不了数据格式,所以要转换为data格式传输,具体代码如下:
<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>
表单中的日期时间控件命名id为startDate
,用于在脚本中初始化该控件的时间,比当前时间多一个小时用于预定时间
也可以用value="YYYY-MM-DDTHH:mm:ss
的格式,初始化日期时间控件
<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>
脚本中最开始用比当前时间多一个小时的时间初始化日期时间控件,注意日期和时间之间的T
然后当点击按钮时,调用sendOrder()
函数,先将表单中的日期时间控件的datetime-local
的值转为Date
类型。再将表单转为JSON发送到后端。
原因分析:
datetime-local的格式为YYYY-MM-DDTHH:mm:ss
,注意日期和时间之间有一个T
,这是ISO 8601
的标准
不过,在Java后端,一般都是用Date
类型接收时间,然后存入数据库。如果直接用Java的LocalDateTime
接收,然后存入数据库,数据库会找不到和LocalDateTime
类型对应的数据库类型
这时候需要将datetime-local
转为Date
类型。一种方式是在后端操作,需要在接收时间参数后进行格式转换,似乎可行。不过实际操作来看,如果用@RequestBody
接收对象类型,那么这种方式不太可行。另一种方式就是在前端发送JSON给服务器之前,将之转为Date
类型