javascript - 如何合并这些 ajax 调用

Question

我做了一门课，我得到了工作，但我认为它效率低下，因为我浸入 DOM 3 次，而它可能是 1 次。我认为您不需要为此查看其余代码，因此我仅发布效率低下的部分以保持整洁：

function showSelectedAttr(){

    var productID = <?php echo $product_info['products_id'];?>;
    var sizeID = 0; 
    var tallID = 0;
    var colID = 0;

    $(".sizeopt").each(function() {
          if ($(this).is(':checked'))  sizeID = $(this).val();                         
     });

     $(".tallopt").each(function() {
          if ($(this).is(':checked'))  tallID = $(this).val();                         
     });

     $(".mine_color").each(function() {
          if ($(this).is(':checked'))  colID = $(this).val();                          
     });

    $.ajax({
              type: "POST",
              url: 'get_product_attribute.php',
              data: "product_id="+ productID +"&size_id="+ sizeID,
              success: function( response ) {       
                    $("#attr_container").html(response);
              } 
     });

     $.ajax({
              type: "POST",
              url: 'get_product_attribute.php',
              data: "product_id="+ productID +"&size_id="+ tallID,
              success: function( response ) {       
                    $("#attr_container_tall").html(response);
              } 
     });

         $.ajax({
              type: "POST",
              url: 'get_product_attribute.php',
              data: "product_id="+ productID +"&size_id="+ colID,
              success: function( response ) {       
                    $("#attr_container_color").html(response);
              } 
     });

}

如您所见，ajax api 被分别调用了 3 次。有一个更好的方法吗？

Answer 1

function showSelectedAttr() {

    var productID = <?php echo $product_info['products_id'] ?>;
    var sizeID = 0; 
    var tallID = 0;
    var colID = 0;

    $(".sizeopt").each(function() {
        if ($(this).is(':checked')) sizeID = $(this).val();                         
    });

    $(".tallopt").each(function() {
         if ($(this).is(':checked')) tallID = $(this).val();                         
    });

    $(".mine_color").each(function() {
         if ($(this).is(':checked')) colID = $(this).val();                          
    });

    $.ajax({ 
        dataType:"json",
        type: "POST", 
        url: 'get_product_attribute.php', 
        data: {
            productId : productID,
            sizeId : sizeID,
            tailId : tailID,
            colId : colID
        }, 
        success: function( response ) {    
            $("#attr_container").html(response.Text);
            $("#attr_container_tall").html(response.Tall);
            $("#attr_container_color").html(response.Color);
        }  
    }); 
}

响应是 json 格式是{Text: "value", Tall: "value", Color: "value" }