我错过了什么?AJAX javascript JSON数组解析到php


What am I missing? AJAX javascript JSON array parse to php

我试图通过一组已经加载的图像到一个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);
?>

文件DIR

  • . . '画廊' index . php
  • . . '画廊' getimages.php
  • . . '画廊' js ' ajaxStuff.js

try this

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

尝试添加async:false,以便ajax在imagesLoaded()之后开始;呼叫已完成

编辑:另一件事你可以尝试使用beforeSend: function() {..}