在提交表单上捕获 500 代码

Question

我在表单上有提交功能

这里是函数代码

 export function submit(): void {
    $("#sequence").val(Number($("#sequence").val()) + 1);
    $("#search_results").addClass("overlay");
    $("#filter_form").submit();
  }

在onUpdated方法中调用了这个函数

这是代码

 // This is what triggers when we anything has been changed.
  function onUpdated(): void {
    if (!skipSubmit) {
      submit();
    }
  }

我有时会收到来自后端的 500 个代码请求，需要在上面显示例如警报。

我需要从请求中获取 500 个状态。

我想知道如何在此代码中执行此操作，因为我只有 $("#filter_form").submit();?

感谢帮助

Answer 1

你可以这样做：

$('#filter_form').submit(function(event) {

    //serialize the data in the form in JSON
    var formData = $("#filter_form").serializeObject();

    $.ajax({
        type        : 'POST',
        url         : //your url
        data        : formData,
        dataType    : 'json', 
        encode          : true
    }).done(function(data) {
       //here it comes if there are no error in the server
    }).fail(function(data){
       //when it fails (so error 500)
       //handle your error
    )};
    event.preventDefault();

}

Answer 2

您正在同步发布表单。浏览器始终显示同步请求的响应。您有 2 个选项来显示用户友好的错误消息：

1- 服务器生成一个用户友好的 html 页面并 returns 到客户端 （您应该在服务器上处理错误并生成错误页面）

2- 异步发送请求（Ajax）并在客户端捕获错误并向用户显示正确的消息：

$.ajax(“/url-to-post”, {
   data: $("#filter_form").serialize(), // serialize form data
   success: function(){
      //... 
   },

   error: function(jqXHR, textStatus, error){
      //...
   },

});

在提交表单上捕获 500 代码

Catch 500 code on submit form

javascript

jquery

submit

typescript