【问题标题】:Receiving 400 bad request when sending a POST with Angularjs (datepicker component)使用 Angularjs(日期选择器组件)发送 POST 时收到 400 错误请求
【发布时间】:2016-01-07 13:25:20
【问题描述】:

我的 web 应用程序基本上是:jsp + angularjs,但是由于我使用的模板,这个 datepicker 是用 jQuery 运行的。

在解释发生了什么之前,我的 DTO 的属性与我的实体属性匹配,两者都是 java.util.Date,我只是通知我已经验证了属性类型,因为我收到了很多 400 个错误请求。

我有一个模式,其中有很多字段,但我最近插入了两个日期选择器(引导程序),直到那时应用程序崩溃,当我通过 ajax 将 POST 发送到我的 java 控制器时,我收到了一个错误的请求(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 -->

控制器:

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);

}

}

【问题讨论】:

    标签: java jquery angularjs bootstrap-datepicker


    【解决方案1】:

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

    【讨论】:

    • 弗兰,首先感谢您的回复。这正是我想要做的,将日期“解析”给我的控制器。但是这个解析可以完成,只有通过设置我在日期选择器中所做的格式选项并且它不起作用......
    • 您能否将这段代码发布到您正在访问/读取dataValidadeConta 参数的salvarUsuario 控制器中?
    • 我假设 UsuarioDTO 模型有一个日期类型为 dataValidadeConta 的字段。当它尝试将 mm/dd/yyyy 输入自动转换为 Date 对象时,它会失败。从我的角度来看,我们在这里有两个选择:1)在 javascript 代码中,将日期转换为控制器中的默认解析器能够解析的格式,或者 2)在模型中,定义一个自定义解析器来转换将mm/dd/yyyy 转换为日期。
    • Fran,关于选项 1),我做到了,它在我的 javascript 中,但它没有解析我不知道为什么。它必须以某种方式工作,出了点问题,但我没有抓住。这是解析的正确方法,以为我不知道该怎么做。谢谢。
    猜你喜欢
    • 1970-01-01
    • 2017-06-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多