如何在ajax调用中使用.each

时间:2017-08-16 19:02:09

标签: jquery

我收到一个控制台错误,说:$ .each(...)。在运行此代码时,done不是函数。它发布到用于将记录插入数据库的php代码正在工作,因为我可以看到数据库中的文件名。我只需要修复我的循环以停止获取错误但不确定这里有什么问题。

$("#edit_pic").on("click", function (e) {
        e.preventDefault();
        var files = $('input[name="file"]').val()
        var data = JSON.parse(files)
    }

    $.each(data, function (index, item) {

        $.ajax({
            url: 'functions/add-support-images.php',
            type: 'POST',
            dataType: 'json',
            data: {
                data: item.file_name
            },
            beforeSend: function () {
                $("#edit_pic").prop("disabled", true).html("Uploading...");
            },
        });
    })

    .done(function (data) {
        if (!data.success) {
            console.log(data.message);


        } else {

            console.log(data.message);

        }

    })

PHP:

$response = array();
            $id = filter_var($_POST['id'], FILTER_SANITIZE_NUMBER_INT);
            $stmt = $link->prepare("INSERT INTO `product_images` (`pic_name`,`product_id`) VALUES (?, ?)");
            $stmt->bind_param("si", $_POST['data'], $id);
            $stmt->execute();
            $stmt->close();


        $response['success'] = true;
        $response['message'] = "success";

1 个答案:

答案 0 :(得分:1)

尝试将.done移至$.ajax之后:

$("#edit_pic").on("click", function (e) {
    e.preventDefault();
    var files = $('input[name="file"]').val()
    var data = JSON.parse(files)
}

$.each(data, function (index, item) {

    $.ajax({
        url: 'functions/add-support-images.php',
        type: 'POST',
        dataType: 'json',
        data: {
            data: item.file_name
        },
        beforeSend: function () {
            $("#edit_pic").prop("disabled", true).html("Uploading...");
        },
    }).done(function (data) {
        if (!data.success) {
            console.log(data.message);


        } else {

            console.log(data.message);

        }

    });
});

修改

如评论中所述,使用上面的代码,您会看到每个项目的成功消息,因为它们是单独发送的。要在一个 ajax调用中发送所有项目,您可以执行以下操作:

let items = [];

$.each(data, function (index, item) {
    items.push({data: item.file_name});
});

$.ajax({
    url: 'functions/add-support-images.php',
    type: 'POST',
    dataType: 'json',
    data: items,
    beforeSend: function () {
        $("#edit_pic").prop("disabled", true).html("Uploading...");
    },
}).done(function (data) {
    if (!data.success) {
        console.log(data.message);
    } else {
        console.log(data.message);
    }
});

注意:这可能需要更新您的PHP代码以接受要插入的项目数组,而不是单个项目。