无法在 AJAX 成功中调用函数

Question

我无法在 Ajax 中成功使用大多数 jQuery。我试图让响应中的错误消息出现在我的通知（toast）div中，但是除了 .show() 和 .hide() 之外我尝试的任何内容都不会工作。

我已经使用console.log()来确保它确实解码了来自url的响应，并且一切都按预期进行，但是我无法调用Ajax成功函数内的函数

这是我当前的 JS，点击按钮即可触发。

function errMsg(code, msg) {
    const eCode = '<b>E-NS: ' + code + ' </b> </br>' + msg;
    const eMsg = '<span class="err" style="color: red;">' + eCode + '</span>';
    
    $('.notify').empty().html(eMsg);
}

$(document).ready(function() {
    $('#next-1').click(function(e) {
        e.preventDefault();
            $.ajax({
                url:'../data.php',
                method: 'POST',
                data: $('#form-1').serializeArray(),
                dataType: 'JSON',
                success:function(response){
                    if(response.status === true){
                        $('#form-1').hide();
                        $('#form-2').show();
                    } else {
                        console.log(response.status);
                        console.log('Response = ' + response.code + response.error);
                        errMsg(response.code, response.error);
                        var eCode = '<b>E-NS: ' + response.code + ' </b> </br>' + response.error;
                        var eMsg = '<span class="err>' + eCode + '</span>';

                        $('.notify').empty().html(eMsg);
                        
                    }
                }
            })
    })
)}

需要注意的是，php 或 jQuery 中没有出现错误或警告。我是 AJAX 新手，所以我不完全确定这是否是我能够做的事情，尽管它看起来足够合乎逻辑，不是吗？

Answer 1

当以 JSON 形式发送数据时，jQuery 方法 .ajax() 需要传入对象的 data 属性中的一个对象唯一的论点。您的 jQuery.serialize() 函数为 URL 创建参数字符串。这在这里行不通。您应该使用jQuery.serializeArray()：

function errMsg(code, msg) {
    const eCode = '<b>E-NS: ' + code + ' </b> </br>' + msg;
    const eMsg = '<span class="err" style="color: red;">' + eCode + '</span>';
    
    $('.notify').html(eMsg);
}

$(document).ready(function() {
    $("#form-2").hide();
    $('#next-1').click(function(e) {
        e.preventDefault();
        // console.log("this will be sent to the server:",$('#form-1').serializeArray());
            $.ajax({
                url: 'https://jsonplaceholder.typicode.com/posts', // '../data.php',
                method: 'POST',
                data:  $('#form-1').serializeArray(),
                dataType: 'JSON',
                success:function(response){
                    // console.log("this came back from the server:",response);
                    if(response){
                        $('#form-1').hide();
                        $('#form-2').show();
                        errMsg(response.id, JSON.stringify(response))
                    } else {
                        console.log(response.status);
                        console.log('Response = ' + response.code + response.error);
                        errMsg(response.code, response.error);
                    }
                }
            })
    })
})

.notify {border: 1px solid grey}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form-1">
First form ... <br>
<input type="text" name="title" value="my very own title"><br>
<input type="text" name="size" value="XL"><br>
<input type="number" name="quantity" value="3"><br>
<button id="next-1" type="button">OK</button>
</form>

<form id="form-2">
Second form ... <br>
<input type="text" name="title" value="some other product title"><br>
<input type="text" name="size" value="M"><br>
<input type="number" name="quantity" value="5"><br>
<button id="next-2" type="button">OK</button>
</form>

<div class="notify">This is the place for messages ...</div>

您还应该检查服务器将发回的内容。对于我的虚拟 JSON API，没有发回 .status 属性。所以对其进行测试没有意义。

Answer 2

我隐藏了我的 toast div ($('.notify'))，直到 div 中有文本。但是，我忽略了添加显示此内容的函数（如下所示），并且在使用 errorCheck() 更新 AJAX 更新 AJAX success 函数中的 toast 后没有调用它代码>

function errorCheck() {
    if ($('.notify').text().trim().length == 0) {
        $('.notify').hide();
    } else {
        var time =  setTimeout(function() {
                        $('.notify').fadeOut('200');
                    }, 5000);
        $('.notify')
            .show()
            .mouseout(function () {
                time;
            })
            .mouseover(function () {
                clearTimeout(time);
            })
            .click(function() {
                $('.notify').fadeOut('100');
            });
    }
}