jQuery GET request in loop

Question

I have a script that works like this: when you go to url

localhost/geocinema/index.php?movie=606

it will download the movie number 606 on my server with this script:

$.ajax({
        url: link,
        type: 'GET',
        beforeSend: function() {
            console.log("Downloading "+title);
        },
        complete: function() {
        },
        success: function(result) {
            console.log("Download Success for "+title);
        }
    });

where the "link" is the php file that handles the download.

now I need to download movies from 1 to 600, so I need to somehow to loop through all that URL-s.

I tried sending get requests from another file, like this:

$.ajax({
        url: 'http://localhost/geocinema/index.php?movie={1-600}',
        type: 'GET',
        beforeSend: function() {
            console.log("Downloading ");
        },
        complete: function() {
        },
        success: function(result) {
            console.log("Download Success ");
        }
    });

but since I use the get request in index.php also it doesn't work (it doesn't wait until the file is downloaded).

So the only way I can download all files is if I manually enter the URL-s from 1 to 600 in the browser and wait for the download, which is not very convenient. Any help will be appreciated, thanks.

Answer 1

I solved it like this:

    var url = window.location.href;
    var ind = url.indexOf("=")+1;
    var res = url.substr(ind)
    res = parseInt(res);
    res = res+1;
    var nxurl = "http://localhost/geocinema/index.php?movie="+res;

    $.ajax({
        url: link,
        type: 'GET',
        beforeSend: function() {
            console.log("Downloading "+title);
        },
        complete: function() {
        },
        success: function(result) {
            console.log("Download Success for "+title);
            window.location = nxurl;
        }
    });

Answer 2

You might want to create a queue of ajax requests, so each waits until the previous is finished. If you just initiate all ajax request in a for loop, then all of them will fire at the same time. In case we are uploading 600 videos it is going to be a very hard load. So one solution is to use for loop with ajax async flag: false.

for (var i = 1; i <= 600; i++) {
    $.ajax({
        url: 'http://localhost/geocinema/index.php?movie=' + i,
        type: 'GET',
        beforeSend: function() {
            console.log("Downloading ");
        },
        async: false,
        complete: function() {
        },
        success: function(result) {
            console.log("Download Success ");
        }
    });
}

Another is do define a function which recursively calls itself when finished uploading.

var currentMovie = 0;
var lastMovie = 600;

function getMovie() {
  $.ajax({
    url: 'http://localhost/geocinema/index.php?movie='+currentMovie,
    type: 'GET',
    beforeSend: function() {
      console.log("Downloading ");
    },
    complete: function() {
      currentMovie++;
      if (currentMoview<=lastMovie) {
        getMovie();
      }
    },
    success: function(result) {
      console.log("Download Success ");
    }
  });
}

getMovie();

Answer 3

Do something like this, it will call the same function after completing the previous call

var i = 1;
function ajaxCall(){
    $.ajax({
        url: 'http://localhost/geocinema/index.php?movie=' + i,
        type: 'GET',
        beforeSend: function() {
            console.log("Downloading ");
        },
        complete: function() {
        },
        success: function(result) {
            console.log("Download Success ");
            if(i++ <= 600){ ajaxCall(); }
        }
    })
}
ajaxCall();

Answer 4

Use a for loop:

for (var i = 1; i <= 600; i++) {
    $.ajax({
        url: 'http://localhost/geocinema/index.php?movie=' + i,
        type: 'GET',
        beforeSend: function() {
            console.log("Downloading ");
        },
        complete: function() {
        },
        success: function(result) {
            console.log("Download Success ");
        }
    });
}