我想念什么？ AJAX JavaScript JSON數組解析為php

Question

我正在嘗試將一組已加載的圖像傳遞到php文件，然后訪問數據庫以加載更多已加載圖像的唯一圖像。 javascript傳遞圖像來源的數組，php文件執行查詢以選擇限制在12個不在傳遞數組中的所有圖像。 php然后將圖像作為JSON對象傳回，因此我可以使用JS適當地處理它們。

摘要

1. 獲取已加載圖像的來源並放入JSON數組中
2. 將JSON數組傳遞到php文件
3. 執行mysql查詢以獲取更多圖像
4. pHp將圖像放入新的圖像數組中
5. 將新的圖像數組傳遞給javascript
6. JavaScript輸出圖像。

javascript不會加載圖像，也不會返回數字php文件中的測試數組。 為什么不起作用？

JAVASCIRPT

var imageArray = {};
imageArray.itemList = [];

function imagesLoaded(){
    var gal_img_thumbs = document.getElementsByClassName("gal-thumb-image");
    for (var i = 0; i < gal_img_thumbs.length ; i++){
        var img = gal_img_thumbs[i].firstChild.getAttribute("src");         
        var new_obj = {'src':img};
        imageArray.itemList.push( new_obj);

        //imageArray.itemList.[i]['src']=img;
    }
}

function loadImages(){
    console.log("load images");

    imagesLoaded();
    $.ajax({
        url: "getimages.php",
        dataType: "json",
        data: {
            imagesArray : imageArray.itemList
        },
        success: function(images){
            for(var i = 0; i < images.length ; i++){
                console.log("image" + images[i]);
            }
        }

    });

}

的PHP

 <?php
$myArray = $_REQUEST['imagesArray'];

$images = array();

for($i = 0; $i < 10; $i++){
    $image = array(
        "num" => $i
    );
    $images[] = $image;
}

echo json_encode($images);
?>

文件目錄

• .. \\ Gallery \\ index.php
• .. \\ Gallery \\ getimages.php
• .. \\ Gallery \\ js \\ ajaxStuff.js

Answer 1

嘗試這個

var imageArray = {};
            imageArray.itemList = [];

            function imagesLoaded() {
                var gal_img_thumbs = document.getElementsByClassName("gal-thumb-image");
                for (var i = 0; i < gal_img_thumbs.length; i++) {
                    var img = gal_img_thumbs[i].firstChild.getAttribute("src");
                    var new_obj = {'src': img};
                    imageArray.itemList.push(new_obj);

                    //imageArray.itemList.[i]['src']=img;
                }
            }

            function loadImages() {
                console.log("load images");

                imagesLoaded();
                $.ajax({
                    url: "/test/test.php",
                    dataType: "json",
                    data: {
                        imagesArray: imageArray.itemList
                    },
                    success: function(images) {
                        for (var i = 0; i < images.length; i++) {
                            console.log("image" + images[i]);
                        }
                    }

                });
            }
            $(function(){
            loadImages();
            });

Answer 2

嘗試添加async:false以便ajax在imagesLoaded（）之后開始。 通話完成

編輯：您可以嘗試的另一件事是使用beforeSend: function() {..}