如何在 1 个函数 ajax 中使用 2 个 url答案

【问题标题】：How to use 2 url in 1 function ajax如何在 1 个函数 ajax 中使用 2 个 url
【发布时间】：2021-12-10 14:24:00
【问题描述】：

我有 2 个表，仓库和项目类别，我想在选择选项 ajax 中显示我的表。我设法显示选择选项项目类别。

我的 Ajax 代码

$(function () {
  var i = 0;
  $("#add-more-item").click(function () {
    ++i;
    $.ajax({
        type:"GET",
        url:"/admin-master/get_item_category",
        dataType: 'JSON',
        success:function(res){
          let option = "";
          $.each(res,function(itemcategory_name,id_item_category){
             option += '<option value='+id_item_category+'>'+ itemcategory_name+ '</option>'
          });
            $(".add-more").append(
              '<tr><td><select class="form-control" id="warehouse"></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+']"><option>-- Pilih Ketegori --</option>'+option+'</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></a></td></tr>'
                );
            }
        });
        
      });

我如何检索数据仓库？我应该创建 2 个 url 来获取类别和仓库项目吗？我可以做2个网址吗？

【问题讨论】：

标签： javascript jquery mysql ajax laravel

【解决方案1】：

为什么不将仓库和商品类别结合到 1 个 url ajax

例如/admin-master/get_item_category_and_warehouse

在控制器中

return response([
  'item_categories' => $itemCategory,
  'warehouse' => $warehouse,
]);

和ajax成功函数

success:function(res){
  let item_categories = res.item_categories,
      warehouse = res.warehouse;
  // process options
}

【讨论】：

【解决方案2】：

每个<option> 都有一个来自 Categories 表的 id 值，这是建议吗？

首先，您必须在模型上定义它们之间的关系（表类别和仓库）。（一对多）

然后您必须在控制器中创建 2 个函数，第一个函数用于获取所有 Category 数据，最后一个函数是过滤具有 Category id 的仓库表。

例子：

函数获取类别表数据

public function getCategories(){
$category = CategoryModel::getAll();
return response()->json('data'=> $category);
}

function filter Warehouse by id (of Categories table)/example

public function filterWarehouse($id){
// using Eloquent or QueryBuilder to find all Warehouse data by $id (Categories table)
return response()->json($wareHouseDataById);
}

然后，在您看来，您必须调用 ajax 来获取所有类别数据（无论您为调用上述两个函数而定义的路由名称），并将类别数据填充到您的 <option> 标记中。准备为每个选项添加onclick事件过滤器。

<option value='+ data.data.id +' onclick="getWarehouseFilter(data.data.id)">'+ data.data.name+'</option>

最后一项工作是创建新的 javascript 函数并调用另一个 ajax 来获取仓库数据（第二个函数）。（目的是 onclick 事件）

ajax调用过滤仓库数据示例：

function getWarehouseFilter(id){
let id = $(this).attr(id);
或
let id = $(this).target.value;
$.ajax({
url: '/getFilterWarehouseData....',
method: 'post',
data: {id: id},
dataType: 'json',
success: function(data){
$('#htmlNeedToRenderData').html(rawHtml(your custom) + data ) // do not use append() in this case.
},
error: function(response){
// do whatever if got an error
}
})
}

希望对你有所帮助。

【讨论】：