使用 Angularjs 发送 POST 时收到 400 错误请求（日期选择器组件）

Question

我的网络应用基本上是：jsp + angularjs，但是这个日期选择器是运行 jQuery，因为我使用的是模板。

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

我有一个模式，其中有很多字段，但我最近插入了两个日期选择器 (bootstrap)，直到那时当我通过 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);

}

}

Answer 1

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

使用 Angularjs 发送 POST 时收到 400 错误请求（日期选择器组件）

Receiving 400 bad request when sending a POST with Angularjs (datepicker component)

java

jquery

angularjs

bootstrap-datepicker