【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>
相關推薦
【JavaScript】將的datetime-local的值轉為Date型傳送到伺服器
datetime-local的格式 datetime-local的格式為YYYY-MM-DDTHH:mm:ss,注意日期和時間之間有一個T,這是ISO 8601的標準 不過,在Java後端,一般都是用Date型別接收時間,然後存入資料庫。如果直接用Jav
【JavaScript】將方法從物件中解耦
在專案中我一直做的一件事情就是把方法從其物件中解耦。 map 、 filter 以及 reduce 並非是全部,但是它們肯定是首先獲得自由的。 解耦方法可以讓方法擺脫父物件所施加的限制,同時在表示程式碼的方式上給了我們更多的自由。 那麼這到底是啥玩意呢? 為簡便起見
【JavaScript】巧妙使用sort方法將陣列內的物件進行排序
前言:在之前寫過一篇【JavaScript】陣列的sort方法排序原理詳解。 sort排序方法實現很巧妙,運用也可以很巧妙,不但可以進行陣列數字之間進行排序,還可以將陣列內的物件進行排序。 一、
【JavaScript】牛客程式設計:將給定數字轉換成二進位制字串。如果字串長度不足 8 位,則在前面補 0 到滿8位。
function convertToBinary(num) { var result = [] while(num != 0) { result.push(num % 2
【javascript】值傳遞 pass by value
最近有一個需求,我們先看一個小的例子 var student = { name: 'Catherine', age: 19, address: { province: '江蘇', city: '南昌' }, lan
【JavaScript】for迴圈得出多個span的值
http://topic.csdn.net/t/20060826/20/4977972.html <body> <form id="Form1" action=""> <span id ="sp1">
【JavaScript】迴圈獲取複選框的值
author:咔咔 wechat:fangkangfk 案例:點選新增獲取選擇的id $('.add').click(function () { var kaka =[];//定義一個數組
【JavaScript】怎樣在 js 中生成指定值、個數的陣列,包含相同元素的陣列
在刷演算法題的過程中,往往會需要設定 n 個 0 元素的陣列,例如 var a = [0,0,0,0, ... ,0]; 少一點,固定個數,可能就自己填了,但是多了,就不那麼容易處理了。查閱相
【JavaScript】牛客程式設計:在陣列 arr 中,查詢值與 item 相等的元素出現的所有位置
function findAllOccurrences(arr, target) { var a = [] arr.forEach(function(item, index) {
【javascript】iframe父子兄弟之間呼叫傳值(contentWindow && parent) (推薦)
iframe的呼叫包括以下幾個方面:(呼叫包含html dom,js全域性變數,js方法) 主頁面呼叫iframe; iframe頁面呼叫主頁面; 主頁面的包含的iframe之間相互呼叫; 主要知識點 1:document.getElementById("ii
【JavaScript】 JS中獲取HTML元素值的三種方法
JavaScript中獲取HTML元素值的三種方法 JS獲取DOM元素的方法(8種): 通過ID獲取(getElementById) 通過name屬性(getElementsByName) 通過標籤名(getElementsByTagName) 通過類
【JavaScript】讓事件支持先發布後訂閱
class 問題 想要 png trigger 很快 9.png area ++ 之前寫過一個的事件管理器,就是普通的先訂閱後發布模式。但實際場景中我們需要做到後訂閱的也能收到發布的消息。比如我們關註微信公眾號,還是能看到歷史消息的。類似於qq離線消息,我先發給你,你登錄了
【JavaScript】js02
mode oninput on() tag tle blur replace absolute padding 正則對象。 聲明: //var reg = new RegExp(‘‘, ‘‘);// i,g 修正符。
【Javascript】call 和aplly
方法的參數 call ava apply 調用 javascrip bsp 方法 rip apply和call是Function類型的原型函數。所有的函數都會自動繼承這兩個方法。 func.apply(thisArg, [argsArray])func.call(thisA
【JavaScript】插件參數的寫法
log var [0 gin script ams selector lpar cti 就是實現復制的一個過程 (function() { var Explode = function(container, params) { ‘use stric
【JavaScript】explode動畫
lte ctu 起點 運動 max cnblogs pic 位置 raw 這是一個js實現的粒子聚合文字或圖片的動畫特效 部分程序如下 n.container = n.container[0] || n.container; /*有且僅有一個cont
【JavaScript】富文本編輯器
bject repl active last rri file data 樣式 current 這是js寫的富文本編輯器,還存在一些bug,但基本功能已經實現,通過這個練習,鞏固了js富文本編輯方面的知識,裏面包含顏色選擇器、全屏、表情、上傳圖片等功能,每個功能實際對應的就
【JavaScript】particle
page 循環 通過 and die 不支持 rst window inner 這是js實現的粒子動畫,有兩種模式,分別是zoom和line,它們對應的效果不同,但是原理都相同,具體分析如下: 部分程序如下: var p = this;
【JavaScript】筆記01——Making Stuff Happen???
文件 eight tin clas 快捷 strong init chrome scrip While, generally speaking, HTML is for content and CSS is for presentation, JavaScript is
【JavaScript】時間戳轉日期格式
number cnblogs 數據 style .ajax con etime subst new 時間戳: 1480570979000 $.ajax({ url : "getOrderMsg?ship