显示警报而不是重定向到内部服务器错误页面？答案

【问题标题】：Show alert instead of redirect to Internal Server Error page?显示警报而不是重定向到内部服务器错误页面？
【发布时间】：2020-05-17 21:25:20
【问题描述】：

有什么方法可以显示警报而不是 500 Internal Server Error 页面？我有一个预测按钮，每当我单击该按钮时，我都想显示警报，而不是将我重定向到另一个页面并显示错误。这是我的 ajax 请求：

$(document).ready(function() {
    $(".myButton").click(function(){
        var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
        var canvasObj = document.getElementById("canvas");
        var img = canvasObj.toDataURL();
        $.ajax({
            type: "POST",
            url: $SCRIPT_ROOT + "/predict/",
            data: img,
            error: function(err) {
                alert('Error'+ err);
            },

            success: function(data){
                $('#result').text(' Predicted Output: '+data);
            }
        });
    });

    });

这是我的html：

 <form id="predictbutton" action="/fourthtask/predict" method="post" enctype="multipart/form-data">
                <!--        <input type="file" name="image" value="Upload">-->
                <input class="btn btn-success myButton" type="submit" value="Predict">
            </form>

我不确定我哪里出错了。我会很感激你的帮助。谢谢。

编辑：我这样做是故意的，因为这是该工具的工作方式，但我不想向用户显示 500 内部服务器错误页面，而是想将其显示为警报或模式。服务器端在烧瓶中。

【问题讨论】：

您正在提交一个表单并且服务器端代码由于某种原因而失败。正确的做法是修复错误。
我知道，每当达到某个条件时，我都会收到该错误，并且我是故意犯该错误的，但重点是将该错误显示为模式或警报，而不是将我重定向到另一个页面。对于服务器端，我使用的是烧瓶
<form> 中有一个“提交”按钮。您的事件处理程序不会阻止默认操作，即浏览器提交页面并使用任何响应重新加载窗口。最简单的做法是将按钮更改为键入“按钮”，或者改用<button type=button>。

标签： javascript jquery ajax

【解决方案1】：

结果显示为新页面，因为您正在提交表单。

这与请求的成功或失败无关。

表单将始终提交并始终将结果显示为新页面。

如果你想阻止它提交以便 Ajax 请求可以运行，那么你需要阻止提交按钮的默认行为：

$(".myButton").click(function(e){
    e.preventDefault();
    var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};

【讨论】：

我试过了，但它根本阻止点击按钮，我只需要阻止提交按钮的默认行为，如果错误，否则如果成功则必须提交。
您可以提交表单并使用本机处理响应或使用 JavaScript 发出请求并使用 JavaScript 处理响应。