Javascript 如何使用JQuery和Spring控制器提交表单

当我禁用ajax功能时，我很难理解为什么表单提交成功。当我在输入表单上启用ajax时。未提交我填写的输入值。我使用chrome开发者工具检查提交的表单数据。我意识到什么也没有发生。 因此，我得到一个错误，要求我填写这些字段

控制器

    @PostMapping(value = "/basicAjax.json")
    @ResponseBody
    public ResponseEntity<Object> addCertJson(@Valid @ModelAttribute CertificateProgramme certificate, BindingResult result, Principal principal) {
        User user = (User) ((UsernamePasswordAuthenticationToken) principal).getPrincipal();
        certificate.setUser(user);
        if (result.hasErrors()) {
            List<String> errors = result.getAllErrors().stream()
                    .map(DefaultMessageSourceResolvable::getDefaultMessage)
                    .collect(Collectors.toList());
            return new ResponseEntity<>(errors, HttpStatus.BAD_REQUEST);
        } else {
            certificateService.save(certificate);
            return new ResponseEntity<>(HttpStatus.ACCEPTED);
        }
    }

@PostMapping（value=“/basicAjax.json”）
@应答器
public ResponseEntity addCertJson（@Valid@ModelAttribute CertificateProgramme certificate，BindingResult，Principal）{
User User=（User）（（UsernamePasswordAuthenticationToken）principal.getPrincipal（）；
证书.setUser（用户）；
if（result.hasErrors（））{
列表错误=result.getAllErrors（）.stream（）
.map（DefaultMessageSourceResolvable:：getDefaultMessage）
.collect（Collectors.toList（））；
返回新的响应属性（错误，HttpStatus.BAD_请求）；
}否则{
certificateService.save（证书）；
返回新的响应状态（HttpStatus.ACCEPTED）；
}
}

JS脚本

var $form = $('.editCert');
var formData = $form.serialize();
var url = $form.attr('action');
var storage = {};
$.each($('.editCert').serializeArray(), function(i, field) {
    storage[field.name] = field.value;
});

$form.on('submit',function(e){
    e.preventDefault();
    $.ajax(url,{
            dataType: 'JSON',
            data: storage,
            type: "POST",
        }).done(function(response){
           if(response.status === 'SUCCESS'){
                 console.log('I am Okay' + response);
                  }else{
                  console.log('Holly Molly');
                   }
        }).fail(function(jqXHR, textStatus, errorThrown){
          var errorInfo="";
          for(i =0 ; i <jqXHR.responseJSON.length ; i++){
                           errorInfo += "<br>" + (i + 1) +". " + jqXHR.responseJSON[i];
                       }
                    var $myerror =  $form.find('.flash').addClass(' failure');
                        $myerror.html("Please correct following errors: " + errorInfo);
           });
    });

var$form=$（'.editCert'）；
var formData=$form.serialize（）；
var url=$form.attr（'action'）；
var存储={}；
$.each（$（'.editCert'）.serializeArray（），函数（i，字段）{
存储[field.name]=field.value；
});
$form.on（'submit'，函数（e）{
e、 预防默认值（）；
$.ajax（url{
数据类型：“JSON”，
数据：存储，
类型：“POST”，
}).完成（功能（响应）{
如果（response.status==“SUCCESS”）{
console.log（'我很好'+响应）；
}否则{
console.log（'Holly Molly'）；
}
}).fail（函数（jqXHR、textStatus、errorshown）{
var errorInfo=“”；
对于（i=0；i解决了我的问题，将表单迭代移动到submit$.ajax submit函数中

$form.on('submit',function(e){
    e.preventDefault();
    $.each($(this).serializeArray(), function(i, field) {
        storage[field.name] = field.value;
    });
   console.log(storage);
    $.ajax(url,{
            //dataType: 'json',
            data: storage,
            type: "POST",
        }).done(function(response){
                 console.log('I am Okay' + response);
        }).fail(function(jqXHR, textStatus, errorThrown){
        console.log(jqXHR);
          if(jqXHR.status === 400){
          var errorInfo="";
          for(i =0 ; i <jqXHR.responseJSON.length ; i++){
                           errorInfo += "<br>" + (i + 1) +". " + jqXHR.responseJSON[i];
                       }
                    var $myerror =  $form.find('.flash').addClass(' failure');
                        $myerror.html("Please correct following errors: " + errorInfo);
            }
           });
    });

$form.on（'submit'，函数（e）{
e、 预防默认值（）；
$.each（$（this）.serializeArray（），函数（i，字段）{
存储[field.name]=field.value；
});
控制台日志（存储）；
$.ajax（url{
//数据类型：“json”，
数据：存储，
类型：“POST”，
}).完成（功能（响应）{
console.log（'我很好'+响应）；
}).fail（函数（jqXHR、textStatus、errorshown）{
console.log（jqXHR）；
如果（jqXHR.status==400）{
var errorInfo=“”；
对于（i=0；i）启用ajax时，表单数据可能以json格式发送。禁用ajax时，数据以formdata格式发送，您应该根据需要调整控制器。在Jquery中，您似乎正在使用e.preventDefault（）停止提交；，并将数据作为AJAX发送，为什么要这样做？@zakariaamine我正在阻止使用默认函数，因为我正在将该表单加载到一个div中。因此，我可以使用jQuery$.post或$，jQuery功能异步提交表单。如果我不这样做，我将无法获得我想要的功能。无论如何，这不是表单未提交的原因连接到控制器
$form.on('submit',function(e){
    e.preventDefault();
    $.each($(this).serializeArray(), function(i, field) {
        storage[field.name] = field.value;
    });
   console.log(storage);
    $.ajax(url,{
            //dataType: 'json',
            data: storage,
            type: "POST",
        }).done(function(response){
                 console.log('I am Okay' + response);
        }).fail(function(jqXHR, textStatus, errorThrown){
        console.log(jqXHR);
          if(jqXHR.status === 400){
          var errorInfo="";
          for(i =0 ; i <jqXHR.responseJSON.length ; i++){
                           errorInfo += "<br>" + (i + 1) +". " + jqXHR.responseJSON[i];
                       }
                    var $myerror =  $form.find('.flash').addClass(' failure');
                        $myerror.html("Please correct following errors: " + errorInfo);
            }
           });
    });