Tidak dapat memanggil fungsi pada kejayaan AJAX

Question

Saya tidak berjaya menggunakan kebanyakan jQuery dengan Ajax. Saya cuba mendapatkan mesej ralat daripada respons untuk muncul dalam div pemberitahuan (toast) saya, tetapi sebagai tambahan kepada .show() dan .hide()< /code> Tiada apa-apa yang saya cuba akan berfungsi.

Saya telah menggunakan console.log() untuk memastikan ia menyahkod respons daripada url dan semuanya berfungsi seperti yang diharapkan, tetapi saya tidak boleh memanggil fungsi di dalam Ajax fungsi kejayaan< ;/ p>

Ini ialah JS semasa saya yang menyala pada klik butang.

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

$(document).ready(function() {
    $('#next-1').klik(fungsi(e) {
        e.preventDefault();
            $.ajax({
                url:'../data.php',
                kaedah: 'POST',
                data: $('#form-1').serializeArray(),
                dataType: 'JSON',
                kejayaan:fungsi(tindak balas){
                    if(response.status === benar){
                        $('#form-1').hide();
                        $('#form-2').show();
                    } lain {
                        console.log(response.status);
                        console.log('Response = ' + response.code + response.error);
                        errMsg(response.code, response.error);
                        var eCode = '<b>E-NS: ' + response.code + ' </b> + response.error;
                        var eMsg = '<span class="err>' + eCode + '</span>';

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

Adalah penting untuk ambil perhatian bahawa tiada ralat atau amaran dalam php atau jQuery. Saya baru menggunakan AJAX jadi saya tidak pasti sama ada ini adalah sesuatu yang boleh saya lakukan, walaupun nampaknya cukup logik, bukan?

Answer 1

hendaklah diganti dengan 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>

Anda juga harus menyemak apa yang pelayan akan hantar semula. Untuk API JSON palsu saya, tiada atribut .status dihantar semula. Jadi tidak ada gunanya mengujinya.

Answer 2

Saya menyembunyikan div roti bakar saya ($('.notify'))，直到 div 中有文本。但是，我忽略了添加显示此内容的函数（如下所示），并且在使用 errorCheck()success tidak memanggilnya selepas roti bakar dalam kod fungsi>

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