java - 使用 Angularjs(日期选择器组件)发送 POST 时收到 400 错误请求

Question

我的网络应用程序基本上是:jsp + angularjs，但是由于我使用的模板，这个日期选择器是使用 jQuery 运行的。

在解释发生的情况之前，我的 DTO 属性与我的实体属性(均为 java.util.Date)相匹配，我只是通知我已经验证了属性类型，因为因此我收到了许多 400 个错误请求。

我有一个模态，其中有很多字段，但我最近插入了两个日期选择器( Bootstrap )，直到那时应用程序崩溃，当我通过ajax将POST发送到我的java Controller 时，我收到了一个错误的请求(400) ，我认为这是因为格式错误(mm/dd/yyyy)。我将巴西的日期格式正确设置为 pt_BR，但它不起作用。

BoxApp.controller("UsuariosController", function($scope, $http) {	
	
	$scope.usuarios={};
	$scope.usuariosParaAlterar={};
	
	$scope.iniciar = function() {
		$http.get('/boxmlV2/usuario').success(function (response) {
			$scope.usuarios = response;
		});
	};
	$scope.iniciar();
	
	$scope.setSelected = function(selecao){
		$scope.usuariosParaAlterar = selecao;
	};
	
	/**
	 * Trecho para validar o form ao submeter.
	 */
	$scope.submitted = false;
	$scope.submitForm = function(formUsuarios) {
	    $scope.submitted = true;	    

		if (formUsuarios.$valid) {
			$("#dataValidadeConta").datepicker({
			    format: 'dd/mm/yyyy',                
			    language: 'pt-BR'
			});
            $("#dataValidadeSenha").datepicker({
                format: 'dd/mm/yyyy',                
                language: 'pt-BR'
            });			    
			
			$scope.editaUsuario();
		}
	};
	
	$scope.editaUsuario = function() {		

		$http.post('/boxmlV2/usuario/salvarUsuario', {
			ativo : $scope.usuariosParaAlterar.ativo, 
			idUsuario : idUsuario.value,
			nome : nome.value,
			senha : senha.value,
			email : email.value,
			bloqueado : $scope.usuariosParaAlterar.bloqueado,
			dataValidadeConta : $scope.usuariosParaAlterar.dataValidadeConta,
			dataValidadeSenha : $scope.usuariosParaAlterar.dataValidadeSenha, 
			resetSenha : $scope.usuariosParaAlterar.resetSenha,
			perfil : $scope.usuariosParaAlterar.perfil			
		}).then(function(response) {
			$scope.sucesso();
		}, function(response) {
			// called asynchronously if an error occurs
			// or server returns response with an error status.
		});

	};

	$scope.sucesso = function() {
		$scope.closeMyPopup();
		$scope.iniciar();		
	};

	$scope.closeMyPopup = function() {
		$(myModal_autocomplete).modal('hide');
	};
	
	$scope.preparaInsercao = function() {		
		nome.value = "";
		senha.value = "";
		email.value = "";		
		$(idUsuario).val("");
		$(idUsuario).hide();
		$(idLabel).hide();
	};	
	
});

<!-- START MODAL -->
					<div id="myModal_autocomplete" class="modal fade" role="dialog"
						aria-hidden="true" style="display: none;">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true"></button>
									<h4 class="modal-title">Cadastro de Usuário</h4>
								</div>
								<div class="modal-body form">
									<form name="form" id="form_sample_2" role="form"
										class="form-horizontal ng-pristine ng-valid" novalidate>

										<div class="form-body">
											<div class="form-group">
												<label class="control-label col-md-3">Ativo:<span
													class="required" aria-required="true"> * </span></label>
												<div class="col-md-9">
													<div class="clearfix">
														<div>
															<label class="btn btn-default active"> <input
																type="radio" name="ativo"
																ng-model="usuariosParaAlterar.ativo" value="true">
																Sim <br />
															</label> <label class="btn btn-default"> <input
																type="radio" name="ativo"
																ng-model="usuariosParaAlterar.ativo" value="false">
																Não <br />
															</label>
														</div>
													</div>
												</div>
											</div>

											<div class="form-group">
												<label class="control-label col-md-3">Nome:<span
													class="required" aria-required="true"> * </span></label>
												<div class="col-md-9">
													<input type="text" ng-model="usuariosParaAlterar.nome"
														class="form-control" id="nome" maxlength="100" name="nome"
														required> <span style="color: red"
														ng-show="submitted && form.nome.$error.required">Campo
														Nome Obrigatório.</span>
												</div>
											</div>

											<div class="form-group">
												<label class="control-label col-md-3">Senha:<span
													class="required" aria-required="true"> * </span></label>
												<div class="col-md-9">
													<input type="password" ng-model="usuariosParaAlterar.senha"
														class="form-control" maxlength="100" name="senha"
														placeholder="Do E-mail De Recebimento do XML" id="senha"
														required> <span style="color: red"
														ng-show="submitted && form.senha.$error.required">Campo
														Senha Obrigatório.</span>
												</div>
											</div>

											<div class="form-group">
												<label class="control-label col-md-3">E-mail:<span
													class="required" aria-required="true"> * </span></label>
												<div class="col-md-9">
													<input type="email" ng-model="usuariosParaAlterar.email"
														class="form-control" id="email" maxlength="100"
														name="email" required> <span style="color: red"
														ng-show="submitted && form.email.$error.required">Campo
														E-mail Obrigatório.</span>
												</div>
											</div>

											<div class="form-group">
												<label class="control-label col-md-3">Bloqueado:<span
													class="required" aria-required="true"> * </span></label>
												<div class="col-md-9">
													<div class="clearfix">
														<div>
															<label class="btn btn-default active"> <input
																type="radio" name="bloqueado"
																ng-model="usuariosParaAlterar.bloqueado" value="true">
																Sim <br />
															</label> <label class="btn btn-default"> <input
																type="radio" name="bloqueado"
																ng-model="usuariosParaAlterar.bloqueado" value="false">
																Não <br />
															</label>
														</div>
													</div>
												</div>
											</div>

											<div class="form-group">
												<label class="control-label col-md-3">Data Validade Conta:<span
													class="required" aria-required="true"> * </span></label>
												<div class="col-md-9">
													<input
														class="form-control form-control-inline input-medium date-picker"
														name="dataValidadeConta" id="dataValidadeConta" 
														ng-model="usuariosParaAlterar.dataValidadeConta"
														size="16" type="text" value="" required/> <span
														class="help-block"> Selecione a data </span>
														<span style="color: red"
														ng-show="submitted && form.dataValidadeConta.$error.required">Campo
														Data Validade Conta Obrigatório.</span>												
												</div>
											</div>

											<div class="form-group">
												<label class="control-label col-md-3">Data Validade Senha:<span
													class="required" aria-required="true"> * </span></label>
												<div class="col-md-9">
													<input
														class="form-control form-control-inline input-medium date-picker"
														ng-model="usuariosParaAlterar.dataValidadeSenha"
														name="dataValidadeSenha" id="dataValidadeSenha" 
														size="16" type="text" value="" required/> <span
														class="help-block"> Selecione a data </span>
														<span style="color: red"
														ng-show="submitted && form.dataValidadeSenha.$error.required">Campo
														Data Validade Senha Obrigatório.</span>												
												</div>
											</div>

											<div class="form-group">
												<label class="control-label col-md-3">Resetar Senha:<span
													class="required" aria-required="true"> * </span>
												</label>
												<div class="col-md-9">
													<div class="clearfix">
														<div>
															<label class="btn btn-default active"> <input
																type="radio" name="resetSenha"
																ng-model="usuariosParaAlterar.resetSenha" value="true">
																Sim <br />
															</label> <label class="btn btn-default"> <input
																type="radio" name="resetSenha"
																ng-model="usuariosParaAlterar.resetSenha" value="false">
																Não <br />
															</label>
														</div>
													</div>
												</div>
											</div>

											<div class="form-group">
												<label class="control-label col-md-3">Perfil
													Usuário:<span class="required" aria-required="true">
														* </span>
												</label>
												<div class="col-md-9">
													<div class="clearfix">
														<div>
															<label class="btn btn-default active"> <input
																type="radio" name="perfil"
																ng-model="usuariosParaAlterar.perfil" value="true">
																Admin <br />
															</label> <label class="btn btn-default"> <input
																type="radio" name="perfil"
																ng-model="usuariosParaAlterar.perfil" value="false">
																Usuário <br />
															</label>
														</div>
													</div>
												</div>
											</div>

											<div class="form-group">
												<label id="idLabel" class="control-label col-md-3">ID:<span
													class="required" aria-required="true"> * </span></label>
												<div class="col-md-9">
													<input type="text" ng-model="usuariosParaAlterar.idUsuario"
														class="form-control" id="idUsuario" maxlength="100"
														name="idUsuario" required disabled> <span
														style="color: red"
														ng-show="submitted && form.idUsuario.$error.required">Campo
														ID Obrigatório.</span>
												</div>
											</div>
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default"
										data-dismiss="modal">Cancelar</button>
									<button type="submit" class="btn btn-primary"
										ng-click="submitForm(form)">
										<i class="fa fa-check"></i> Salvar
									</button>
								</div>
							</div>
						</div>
					</div>
					<!-- END MODAL -->

Controller :

package br.com.kolss.boxml.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import br.com.kolss.boxml.dto.RetornoDTO;
import br.com.kolss.boxml.dto.UsuarioDTO;
import br.com.kolss.boxml.enums.RetornoEnum;
import br.com.kolss.boxml.service.UsuarioService;

@Controller
public class CadastroUsuariosController {

@Autowired
private UsuarioService usuarioService;

@RequestMapping(value="/usuario", method=RequestMethod.GET)
public ModelAndView iniciar(ModelMap modelMap){
    return new ModelAndView("usuario");
}

@RequestMapping(value="/usuario",method=RequestMethod.GET,produces={"application/json"})
public @ResponseBody List<UsuarioDTO> obterTodos(ModelMap modelMap){
    return usuarioService.obterTodos();
}

@RequestMapping(value = "/usuario/salvarUsuario", method = RequestMethod.POST, produces = { "application/json" })
public @ResponseBody RetornoDTO insereOuEditaUsuario(
        @RequestBody UsuarioDTO usuarioDTO) {

    usuarioService.insereOuEditaUsuario(usuarioDTO);
    return new RetornoDTO(RetornoEnum.SUCESSO);

}

}

Answer 1

pt_BR 的日期格式仅适用于它在日期选择器控件中的显示方式。请注意，您要向服务器发送回一个字符串 mm/dd/yyyy，您需要确保它在 Controller 中被如此解析。