如何在一个AJAX函数中获取仓库、商品分类数据填充下拉选择框

首先明确三个核心疑问的结论：

• 单个AJAX请求不能同时指定两个URL，每一个AJAX实例只能对应一个请求地址
• 你可以选择两种实现方案：要么后端调整接口同时返回商品分类+仓库数据，仅发一次请求；要么分别调用两个接口获取对应数据
• 不需要强行在同一个AJAX配置里写两个URL，推荐要么合并接口，要么用jQuery自带的$.when方法并发两个请求，逻辑更清晰

方案1：合并接口（推荐，性能最优） #

后端调整原有接口或者新增一个统一拉取基础数据的接口，返回格式同时包含两张表的数据：

接口返回示例：

{
  "item_categories": {"电子类":1, "服饰类":2},
  "warehouses": {"上海仓":101, "广州仓":102}
}

对应前端代码修改如下（同时修正了你原有代码里的HTML语法错误：标签未闭合、id重复、多余结束标签等问题）：

$(function () {
  var i = 0;
  $("#add-more-item").click(function () {
    ++i;
    $.ajax({
      type:"GET",
      url:"/admin-master/get_base_item_data", // 替换为合并后的接口地址
      dataType: 'JSON',
      success:function(res){
        // 生成商品分类选项
        let categoryOption = '<option>-- Pilih Ketegori --</option>';
        $.each(res.item_categories,function(itemcategory_name,id_item_category){
          categoryOption += `<option value="${id_item_category}">${itemcategory_name}</option>`
        });
        // 生成仓库选项
        let warehouseOption = '<option>-- Pilih Gudang --</option>';
        $.each(res.warehouses,function(warehouse_name,id_warehouse){
          warehouseOption += `<option value="${id_warehouse}">${warehouse_name}</option>`
        });
        // 插入新增行
        $(".add-more").append(`
          <tr>
            <td><select class="form-control" name="warehouse_id[${i}]" required>${warehouseOption}</select></td>
            <td><input type="text" name="item_code[${i}]" class="form-control" placeholder="Kode Barang" required></td>
            <td><select class="form-control" name="itemcategory_id[${i}]" required>${categoryOption}</select></td>
            <td><input type="text" name="item_name[${i}]" class="form-control" placeholder="Nama Barang" required></td>
            <td><input type="text" name="item_weight[]" class="form-control" placeholder="Contoh : 200 kg" required></td>
            <td><input type="text" name="item_height[]" class="form-control" placeholder="Contoh : 200 cm" required></td>
            <td><input type="number" name="item_qty[]" class="form-control" placeholder="Contoh : 200 " required></td>
            <td><input type="text" name="description[]" class="form-control" placeholder="Keterangan Barang"></td>
            <td align="center"><button type="button" class="remove-item btn btn-danger btn-md"><i class="fas fa-trash-alt"></i></button></td>
          </tr>
        `);
      }
    });
  });
  // 补充删除行逻辑
  $(document).on('click', '.remove-item', function() {
    $(this).closest('tr').remove();
  });
});

方案2：不修改后端，并发两个请求 #

如果不想调整后端接口，可以先新增一个拉取仓库数据的接口，用$.when同时发起两个请求：

$(function () {
  var i = 0;
  // 页面初始化就拉取一次基础数据，不用每次新增都发请求，性能更好
  let categoryData = null, warehouseData = null;
  $.when(
    $.getJSON("/admin-master/get_item_category"),
    $.getJSON("/admin-master/get_warehouse") // 后端新增的获取仓库数据的接口
  ).done(function(categoryRes, warehouseRes){
    categoryData = categoryRes[0];
    warehouseData = warehouseRes[0];
  });

  $("#add-more-item").click(function () {
    ++i;
    // 直接用预加载的数据生成选项
    let categoryOption = '<option>-- Pilih Ketegori --</option>';
    $.each(categoryData,function(itemcategory_name,id_item_category){
      categoryOption += `<option value="${id_item_category}">${itemcategory_name}</option>`
    });
    let warehouseOption = '<option>-- Pilih Gudang --</option>';
    $.each(warehouseData,function(warehouse_name,id_warehouse){
      warehouseOption += `<option value="${id_warehouse}">${warehouse_name}</option>`
    });
    // 插入行的逻辑和方案1完全一致，此处省略
  });
});

优化建议 #

不要每次点击新增行都发起接口请求，页面初始化时一次性拉取商品分类、仓库这类不常变动的基础数据存为全局变量，新增行时直接用变量生成选项即可，减少不必要的服务端请求。

内容的提问来源于stack exchange，提问作者mfahmifadh