前端上传日期时间数据到后台时，上传失败_为什么前端传的日期全部是string-优快云博客

本文链接：https://blog.youkuaiyun.com/csdnyq/article/details/104287724

本文详细解析了前端使用<input type=text>上传日期时间数据到后台时遇到的问题及解决办法。主要介绍了两种解决策略：一是将后台参数类型由Date改为String；二是使用@DateTimeFormat注解进行日期格式化。通过这两种方法，可以有效避免String到Date转换失败导致的数据传输问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端上传日期时间数据到后台时，上传失败

我这里是用<input type="text">里存放时间，上传到后台的controller方法时，参数类型是java.util.Date，发现没有到controller方法里面。报错：不能将String转成Date。
我想错误的原因是前端传上来的是String，而controller方法里用Date接收，因为转换失败而一直不能把数据传到controller。

一开始的错误代码

<div class="modal-body">
    <form class="form-horizontal" id="book_car_form">
        <input type="hidden" id="book_car_id" name="carId"/>
        <div class="form-group">
            <label for="startUseCarDatetime" class="col-sm-3 control-label">从</label>
            <div class="input-group date starttime col-md-6" data-date-format="yyyy-mm-dd hh:ii:ss" data-link-field="startUseCarDatetime">
                <input type="text" size="30"  id="startUseCarDatetime" name="startUseCarDatetime" class="form-control" onchange="setSecond(id)">
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
            </div>
        </div>
        <div class="form-group">
            <label for="endUseCarDatetime" class="col-sm-3 control-label">到</label>
            <div class="input-group date endtime col-md-6" data-date-format="yyyy-mm-dd hh:ii:ss" data-link-field="endUseCarDatetime">
                <input type="text" size="30"  id="endUseCarDatetime" name="endUseCarDatetime" class="form-control"  onchange="setSecond(id)">
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
    <button type="button" class="btn btn-primary" onclick="bookCar()">确定预约</button>
</div>

function bookCar() {
   alert($("#book_car_form").serialize());
   $.post("<%=basePath%>front/order/bookCar", $("#book_car_form").serialize(), function (data) {
       if (data == "1") {
           alert("预约成功！");
       } else {
           alert("预约失败！");
       }
       window.location.reload();
   });
}

controller

@RequestMapping("bookCar")
public String bookCar(Integer carId, Date startUseCarDatetime, Date endUseCarDatetime, HttpSession session) {
//...
}

解决方法

方法1

在controller方法里面的参数的类型都改为String

@RequestMapping("bookCar")
public String bookCar(Integer carId, String startUseCarDatetime, String endUseCarDatetime, HttpSession session) {
//...
}

方法2

如果想用一个pojo接收，可以在Date属性加上@DateTimeFormat标签

@RequestMapping("bookCar")
public String bookCar(BookCarQueryVo bookCarQueryVo, HttpSession session) {
//...
}

public class BookCarQueryVo {
    private Integer carId;

    @DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")
    private Date startUseCarDatetime;

    @DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss")
    private Date endUseCarDatetime;

    public Integer getCarId() {
        return carId;
    }

    public void setCarId(Integer carId) {
        this.carId = carId;
    }

    public Date getStartUseCarDatetime() {
        return startUseCarDatetime;
    }

    public void setStartUseCarDatetime(Date startUseCarDatetime) {
        this.startUseCarDatetime = startUseCarDatetime;
    }

    public Date getEndUseCarDatetime() {
        return endUseCarDatetime;
    }

    public void setEndUseCarDatetime(Date endUseCarDatetime) {
        this.endUseCarDatetime = endUseCarDatetime;
    }

}