multiple ajax requests - jQuery

I have javascript as below;

$.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#title1").html()
        },
        success: function(response){
          $cell1.css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
      });
$.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#ti开发者_如何学运维tle2").html()
        },
        success: function(response){
          $cell2.css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
      });
$.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#title3").html()
        },
        success: function(response){
          $cell3.css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
      });
$.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#title4").html()
        },
        success: function(response){
          $cell4.css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
      });

and more... Each time when i want result, i have to ajax and this made the script lengthy. Is there any way to shorten the code??

You can see my complete code here. I will be very thankful if somebody correct my code..

---

How about making a function to do it for you?

function updateImage(title, cell) {
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
            filename: title
        },
        success: function (response) {
            cell.css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
    });
}

You could then call this:

updateImage($('#title1').html(), $cell1);
updateImage($('#title2').html(), $cell2);
updateImage($('#title3').html(), $cell3);
updateImage($('#title4').html(), $cell4);

---

function myJax(file,successBlock){
$.ajax({
    type: "POST",
    url: "ajax.php",
    data: {
      filename: file
    },
    success: function(response,successBlock){
      successBlock.css("background-image", "url('pdfthumb/" + response + ".jpg')");
    }
  });
};
myJax($("#title1").html(),$cell1);
myJax($("#title2").html(),$cell2);
// etc...

---

There are indeed quite a few ways in which you can shorten the number of lines of codes you have to write. I would start by wrapping up the $.ajax function in a wrapper and using that wrapper to do your stuff. Something like

function myAjax(mdata,mcallback){
$.ajax({
        type: "POST",
        url: "ajax.php",
        data: mdata,
        success: function(response){
mcallback(response);
        }
      });
}

You can then go

myAjax($("#title3").html(),callback);

---

Have a javascript Function like this

function ajax_call(urlString,title,cell)
        {
            ret_val="";
            $.ajax
            (
                {
                    type: "POST",
                    url: urlString,
                    data: {
                      filename: $("#"+title).html()
                    },
                    success: function(response){
                      $("#"+cell).css("background-image", "url('pdfthumb/" + response + ".jpg')");
                    }
            );
            return ret_val;
        } 

And then call the function like this

ajax_call("http://xyz.com","title1","cell1");
ajax_call("http://xyz.com","title2","cell2");

For this , you should find out a way to identify cell1, cell2 ... i am assuming it will have an html id to identify

---

If all the calls are done immediately after each other, it might be worth trying to get a list of Urls in a single call, for a list of titles supplied. ie only make a single ajax call when required.

---

I solved this using following script;

<script type="text/javascript">
function updateBackground(cellId, titleId) {
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#"+titleId).html()
        },
        success: function(response){
          $("#"+cellId).css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
    });
}

$(document).ready(function(){
    updateBackground("res1", "title1");
    updateBackground("res2", "title2");
    updateBackground("res3", "title3");
    updateBackground("res4", "title4");
});
</script>