Impossible d'appeler la fonction en cas de succès AJAX

Question

Je n'arrive pas à utiliser avec succès la plupart des jQuery avec Ajax. J'essaie de faire apparaître le message d'erreur de la réponse dans mon div de notification (toast), mais en plus de .show() /code> Rien de ce que j’essaie ne fonctionnera.

J'ai utilisé console.log() pour m'assurer qu'il décode la réponse de l'URL et que tout fonctionne comme prévu, mais je ne peux pas appeler la fonction dans Ajax. fonction de réussite< ;/ p>

C'est mon JS actuel qui se déclenche en cliquant sur un bouton.

fonction errMsg(code, msg) {
    const eCode = 'E-NS : ' + code + ' 
    const eMsg = '' + eCode + '';
    
    $('.notify').empty().html(eMsg);
}

$(document).ready(function() {
    $('#next-1').click(function(e) {
        e.preventDefault();
            $.ajax({
                URL : '../data.php',
                méthode : 'POST',
                données : $('#form-1').serializeArray(),
                Type de données : 'JSON',
                succès:fonction(réponse){
                    si(response.status === vrai){
                        $('#form-1').hide();
                        $('#form-2').show();
                    } autre {
                        console.log(response.status);
                        console.log('Réponse = ' + réponse.code + réponse.erreur);
                        errMsg(réponse.code, réponse.erreur);
                        var eCode = 'E-NS : ' + réponse.code + ' 
                        var eMsg = '

Answer 1

doit être remplacé par 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>

Vous devez également vérifier ce que le serveur va renvoyer. Pour mon API JSON factice, aucun attribut .status n'est renvoyé. Cela ne sert donc à rien de le tester.

Answer 2

J'ai caché mon div toast ($('.notify'))，直到 div 中有文本。但是，我忽略了添加显示此内容的函数（如下所示），并且在使用 errorCheck() 更新 AJAX success je ne l'appelle pas après toast dans le code de fonction>

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