無法在 AJAX 成功中呼叫函數

Question

我無法在 Ajax 中成功使用大多數 jQuery。我試圖讓回應中的錯誤訊息出現在我的通知（toast）div中，但是除了.show() 和.hide() 之外我嘗試的任何內容都不會工作。

我已經使用console.log()來確保它確實解碼了來自url的響應，並且一切都按預期進行，但是我無法調用Ajax成功函數內的函數< ;/ p>

這是我目前的 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');
            });
    }
}