多个ajax请求-jQuery

我有如下javascript

$.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: $("#title2").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')");
        }
      });

还有更多。。。每次当我想要结果时，我必须使用ajax，这使得脚本很长。有没有办法缩短代码

您可以看到我的完整代码。如果有人纠正我的代码，我将非常感激

谢谢你

---

blasteralfred

制作一个函数来为您完成它怎么样

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

你可以称之为：

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

---

确实有很多方法可以缩短必须编写的代码行数。首先，我将把$.ajax函数包装在一个包装器中，并使用该包装器完成您的工作。差不多

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

---

有这样一个javascript函数

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

然后像这样调用函数

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

---

为此，您应该找到一种方法来识别cell1、cell2。。。我假设它将有一个html id来标识

如果所有调用都是紧接着进行的，那么对于提供的标题列表，在一次调用中尝试获取URL列表可能是值得的。ie只在需要时进行一次ajax调用。

我使用以下脚本解决了这个问题

<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>

函数updateBackground（cellId，titleId）{
$.ajax({
类型：“POST”，
url:“ajax.php”，
数据：{
文件名：$（“#”+titleId）.html（）
},
成功：功能（响应）{
$（“#”+cellId）.css（“背景图像”，“url（'pdfthumb/“+response+”.jpg'））；
}
});
}
$（文档）.ready（函数（）{
更新背景（“res1”、“title1”）；
更新背景（“res2”，“title2”）；
更新背景（“res3”，“title3”）；
更新背景（“res4”，“title4”）；
});

我尚未测试，但我认为您需要将单元格传递给回调函数，因为回调函数不会在创建它的函数的上下文中执行。@Billy不正确--函数继承其父函数的作用域。你好@lonesomeday，我发现你的问题很有用，但我的浏览器崩溃了。。不知道是不是我的语法错误。。你可以在这里看到我的完整脚本。你能帮我编辑一下吗，因为我是初学者(

<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>