Funktion kann bei AJAX-Erfolg nicht aufgerufen werden

Question

Ich kann die meisten jQuery-Dateien nicht erfolgreich mit Ajax verwenden. Ich versuche, die Fehlermeldung aus der Antwort in meinem Benachrichtigungs-(Toast-)Div erscheinen zu lassen, aber zusätzlich zu .show() /code> Nichts, was ich versuche, wird funktionieren.

Ich habe console.log() verwendet, um sicherzustellen, dass die Antwort von der URL dekodiert wird und alles wie erwartet funktioniert, aber ich kann die Funktion nicht innerhalb von Ajax aufrufen Erfolgsfunktion< ;/ p>

Dies ist mein aktuelles JS, das beim Klicken auf die Schaltfläche ausgelöst wird.

function errMsg(code, msg) {
    const eCode = '<b>E-NS: ' + code + ' </b>'
    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',
                Methode: 'POST',
                Daten: $('#form-1').serializeArray(),
                Datentyp: 'JSON',
                success:function(response){
                    if(response.status === true){
                        $('#form-1').hide();
                        $('#form-2').show();
                    } anders {
                        console.log(response.status);
                        console.log('Response = ' + Response.code + Response.error);
                        errMsg(response.code, Response.error);
                        var eCode = '<b>E-NS: ' + Response.code + ' </b>
                        var eMsg = '<span class="err>' + eCode + '</span>';

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

Es ist wichtig zu beachten, dass es in PHP oder jQuery keine Fehler oder Warnungen gibt. Ich bin neu bei AJAX und bin mir daher nicht ganz sicher, ob ich das tun könnte, obwohl es logisch genug erscheint, nicht wahr?

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 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');
            });
    }
}