I am trying to pass a set of already loaded images to a php file to then access a database to load more images unique to the ones already loaded. The javascript passes an array of the sources of the images, the php file performs a query to select all images limited to 12 not in the passed array. php then passes back the images as JSON objects so I can use JS to appropriately handle them.
SUMMARY
The javascript isn't loading the images, nor is it returning the test array I have in the php file of numbers. Why is it not working?
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);
?>
FILE DIR
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();
});
try adding async:false
so that ajax begins after the imagesLoaded(); call is completed
Edit: another thing you may try is to use beforeSend: function() {..}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.