从 API 中获取数据失败后未显示错误 div

Question

所以我有这个网页，其中有一个 input 字段。用户可以输入内容，然后通过 AJAX post method 提交表单。然后使用用户输入从 post 端点中的 API 获取数据。 API returns 一些数据然后被发送到前端，我可以在 success 方法内的 AJAX 块中访问它，然后在网页上呈现。现在一切正常。

当 post 端点未能从 API 获取数据时出现问题。 post 端点的 catch block 运行，但它不会在网页上显示基于 connect-flash-plus 的 error flash message。它只是 redirects 到页面。

此时请注意，在我未使用任何 AJAX 表单提交方法的应用程序的其他页面上，Flash 消息完美运行。所以我认为这是因为 AJAX.

这是 HTML:

<!-- ERROR SECTION  -->

<form id="form">
        <input type="text" id="inlineFormInputName2" required >
        <button type="submit" class="submit">Submit</button>
</form>

<% if(error && error.length > 0){ %>
        <div class="error-container boxshadow w-100 mb-5">
                <div class="alert alert-danger">
                        <strong>Error:</strong> <%= error %>
                </div>
        </div>
<% } %>

这些是 GET 和 POST 端点：

router.get("/example", async (req, res) => {

    try{
        res.locals.title = "Example";
        res.render( "../views/example" );
    }catch(err) {
        req.flash("error", "Unable to retrieve data. Please try again!");
        res.redirect("/example");
    }
    
});


router.post("/example", async (req, res) => {
    try{
        const query     = req.body.name;
        const url       = `https://api.example.com/${query}?key=${process.env.API_KEY}`;
        const response  = await axios.get(url);

        if( response.status === 200 ) {

            return res.json({ 
                data: response.data
            });
        
        }

    }catch(err) {
        console.log(err)
        req.flash("error", "Unable to retrieve data. Please try again!");
        res.redirect("/example");
    }
});

这是 main.js 文件中的 AJAX 代码：

$(#form).submit( e => {

        e.preventDefault();
        const formInput = $('#inlineFormInputName2');
        const name = formInput.val();

        $.ajax({
            type: "POST",
            url: '/example',
            dataType: 'json',
            data: { 
                "name": name
            },
            beforeSend: function () { 
                $('.loader-container').removeClass('hidden');
            },
            success: function (data) {
                console.log(data)
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log('1: ', jqXHR)
                console.log('2: ', textStatus)
                console.log('3: ', errorThrown)
                $('.loader-container').addClass('hidden');
                $('section .error-container').removeClass('hidden');
            },
            complete: function () { 
                $('.loader-container').addClass('hidden');
            }
        });
    });

更新：

因为我使用的是 catch 块，所以我不得不删除连接闪存消息并创建 res.json() 作为错误消息。然后可以在成功方法的 ajax 调用中访问它。我不知道为什么，但它可以在成功方法而不是错误方法中访问。

Answer 1

因为我使用的是 catch 块，所以我不得不删除连接闪存消息并创建了一个 res.json() 作为错误消息。然后可以在成功方法而不是错误方法的 ajax 调用中访问它。

从 API 中获取数据失败后未显示错误 div

Error div not showing after failing to fetch data from API

ajax

jquery

ejs

node.js

express