recherche

Maison  >  Questions et réponses  >  le corps du texte

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

<p>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 <code>.show()</code> /code> Rien de ce que j’essaie ne fonctionnera. </p> <p>J'ai utilisé <code>console.log()</code> 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> <p>C'est mon JS actuel qui se déclenche en cliquant sur un bouton. </p> <pre class="brush:php;toolbar:false;">fonction errMsg(code, msg) { const eCode = '<b>E-NS : ' + code + ' </b> const eMsg = '<span class="err" style="couleur : rouge;">' + eCode + '</span>'; $('.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 = '<b>E-NS : ' + réponse.code + ' </b> var eMsg = '<span class="err>' + eCode + '</span>'; $('.notify').empty().html(eMsg); } } }) }) )}</pré> <p>Il est important de noter qu’il n’y a aucune erreur ou avertissement dans php ou jQuery. Je suis nouveau sur AJAX, donc je ne suis pas sûr que ce soit quelque chose que je serais capable de faire, même si cela semble assez logique, non ? </p>
P粉020556231P粉020556231480 Il y a quelques jours562

répondre à tous(2)je répondrai

  • P粉038161873

    P粉0381618732023-09-03 13:09:00

    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.

    répondre
    0
  • P粉872182023

    P粉8721820232023-09-03 09:36:17

    J'ai caché mon div toast ($('.notify')),直到 div 中有文本。但是,我忽略了添加显示此内容的函数(如下所示),并且在使用 errorCheck()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');
                });
        }
    }

    répondre
    0
  • Annulerrépondre