javascript - 在 Laravel 中获取基于 Ajax 的数据

转载作者：行者123 更新时间：2023-11-28 03:44:22

我尝试创建一个查找器(一种高级搜索)，但我已经完成了一半，但在获取搜索查询的第三部分时遇到了问题。

逻辑

选择类别
选择子类别
选择子类别中的产品规范
选择子类别中的品牌

基本上用户会选择类别，然后选择该类别的子类别直到这里我已经完成然后该子类别产品的所有规范和品牌都会呈现出来供选择。

问题

My problem is to get specifications and brands from selected subcategory.

我想要根据所选子类别获取这些信息的原因是因为每个子类别产品都有不同的品牌和规范，例如我不想在用户选择鼠标时显示cpu规范 子类别!任何类型的鼠标都没有 CPU，这就是全部原因。

代码

Blade

<form action="" class="mt-20">
                <div class="col-md-3">
                    <label for="category_id">category</label>
                    <select name="category_id" class="form-control">
                        <option value="">Select Category</option>
                        @foreach($findercategories as $category)
                            <option value="{{$category->id}}">{{$category->title}}</option>
                        @endforeach
                    </select>
                </div><!-- end col-md-3 -->
                <div class="col-md-3">
                    <label for="subcategory_id">subcategory</label>
                    <select name="subcategory_id" class="form-control">
                        <option value="">Select Subcategory</option>
                    </select>
                </div><!-- end col-md-3 -->
                <div class="col-md-3">
                    <label for="specification_id">specifications</label>
                    <select name="specification_id" class="form-control">
                        <option value="">Select Specification</option>
                    </select>
                </div><!-- end col-md-3 -->
                <div class="col-md-3">
                    <label for="brand_id">brands</label>
                    <select name="brand_id" class="form-control">
                        <option value="">Select Brand</option>
                    </select>
                </div><!-- end col-md-3 -->
                <div class="row">
                    <div class="col-md-3 col-md-offset-9">
                        <button style="margin: 20px;" class="pull-right btn btn-info" type="submit">Find</button>
                    </div>
                </div>
              </form>

Javascript

<script type="text/javascript">
  $(document).ready(function() {
    $('select[name="category_id"]').on('change', function() {
      var categoryID = $(this).val();
      if(categoryID) {
      $.ajax({
        url: '{{ url('getSubCategories') }}/'+encodeURI(categoryID),
        type: "GET",
        dataType: "json",
        success:function(data) {
        $('select[name="subcategory_id"]').empty();
        $.each(data, function(key, value) {
            $('select[name="subcategory_id"]').append('<option class="form-control" value="'+ value['id'] +'">'+ value['title'] +'</option>');
            });
        }
      });
      }else{
        $('select[name="subcategory_id"]').empty();
      }
    });
  });
</script>

<script type="text/javascript">
  $(document).ready(function() {
    $('select[name="subcategory_id"]').on('change', function() {
      var subcategoryID = $(this).val();
      if(subcategoryID) {
      $.ajax({
        url: '{{ url('getspecifications') }}/'+encodeURI(subcategoryID),
        type: "GET",
        dataType: "json",
        success:function(data) {
        $('select[name="specification_id"]').empty();
        $.each(data, function(key, value) {
            $('select[name="specification_id"]').append('<option class="form-control" value="'+ value['id'] +'">'+ value['title'] +'</option>');
            });
        }
      });
      }else{
        $('select[name="specification_id"]').empty();
      }
    });
  });
</script>

Controller

//get categories list
$findercategories = Category::ofStatus('Active')->get();

//finder (subcategories)
    public function getSubCategories($id){
        $subcategory = Subcategory::where('category_id', $id)->get();
        return response()->json($subcategory);
    }

//finder (specifications + brands)
    public function getspecifications($id){
        $product = Product::where('subcategory_id', $id)->get();
        $productsubsp = DB::table('product_subspecification')->where('product_id', $product)->get();
        $specifications = $productsubsp;
        return response()->json($specifications);
    }

路线

Route::get('/getSubCategories/{id}', 'frontend\SearchController@getSubCategories');
Route::get('/getspecifications/{id}', 'frontend\SearchController@getspecifications');

额外(只是为了清楚我尝试获取的数据)

我的产品品牌正在使用 ID 保存在 products 表的列中名为brand_id
我的产品规范保存在名为product_subspecation 将获取 id product_id 和subspecification_id

这就是我在前端获取这些信息的方式:

针对品牌

{{$product->brand->title}}

以及规范

在 Controller 中

$specifications = $product->subspecifications->mapToGroups(function ($item, $key) {
        return [$item->specification->title => $item];
    });

在 Blade 中

@foreach($specifications as $specificationtitle => $specificationcollection)
<tr>
<th style="width:150px;">{{ $specificationtitle }}</th>
<td class="text-left">
@foreach($specificationcollection as $subspecification)
{{$subspecification->title}}
@endforeach
</td>
</tr>
@endforeach

返回结果如下:

CPU CORE I5 CORE I3 CORE I7

RAM 2 GIG 4 GIG

更新

我设法在规范下拉列表中获得结果，但是我无法在所选子类别下获取所有产品我只能获取最后一个产品，而不是全部。

代码

这是我当前获取结果的方式

public function getspecifications($id){
            //find products under subcategory
             $product = DB::table('products')
                            ->where('subcategory_id', $id)
                            ->get();
                            foreach($product as $pp) {
                            }
            $specificationsw = $pp->id; //get products id (currently has issue, only gets 1)

            // find products specification with same product id
            $specificationss = DB::table('product_subspecification')
                            ->where('product_id', $specificationsw)->get();
                            foreach($specificationss as $dd) {
                            }
            $specificationsss = $dd->subspecification_id; //get specifications id from product_subspecification table


            // get specifications title base on table above
           $specifications = DB::table('subspecifications')
                            ->where('id', $specificationsss)->get();
        return response()->json($specifications);
    }

知道如何获取我的所有产品id，而不是仅获取我当前获取的最后一个产品吗？

更新2

我将 Controller 更改为下面的代码，现在我可以从子类别中获取所有产品:

public function getspecifications($id){
            //find products under subcategory
            $product = DB::table('products')
                            ->where('subcategory_id', $id)
                            ->get();
            $date = array();
            foreach ($product as $stan) {
                $date[] = $stan->id;
            }
            $specificationsw = $date; //get products id (currently has issue, only gets 1)

            // find products specification with same product id
            $specificationss = DB::table('product_subspecification')
                            ->where('product_id', $specificationsw)->get();
            $date2 = array();
            foreach ($specificationss as $stan2) {
                $date2[] = $stan2->subspecification_id;
            }
            $specificationsss = $date2; //get specifications id from product_subspecification table

            // get specifications title base on table above
            $specifications = DB::table('subspecifications')
                            ->where('id', $specificationsss)->get();
            $date3 = array();
            foreach ($specifications as $stan3) {
                $date3[] = $stan3;
            }           
            $specifications = $date3;
        return response()->json($specifications);
    }

现在这是我的 dd 结果:

dd($specationssw); products dd 这是产品的 id 2 个产品

array:2 [▼
  0 => 27
  1 => 38
]

dd($specationsss);product_subspecification 表结果仅返回产品 id 27 的值。产品 id 38 不返回值!

array:2 [▼
  0 => 5
  1 => 8
]

dd($specations); 我的函数最后一部分的结果我在前端的ajax代码中得到了这个标题但是正如你看到的关于的信息>subspesification id 8 和 product id 38 丢失。

array:1 [▼
  0 => {#722 ▼
    +"id": 5
    +"title": "4 GIG"
    +"specification_id": 2
    +"created_at": "2017-12-04 00:00:00"
    +"updated_at": "2017-12-04 00:00:00"
  }
]

最佳答案

已解决

我在这里解决了我的问题，供有需要的人使用:

说明:

Controller 的第一个方法将根据选择获取子类别类别 ID。
第二种方法将根据选定的子类别显示规范，注释在我的案例中，规范存储在其表中并与我的产品相关 sync method在第三个表中。 (仅显示该子类别下的产品中使用的规范)
第三种方法将根据所选子类别显示品牌(仅显示该子类别下的产品中使用的品牌)

Controller 方法

//finder (find subcategories base on selected category)
    public function getSubCategories($id){
        $subcategory = Subcategory::where('category_id', $id)->get();
        return response()->json($subcategory);
    }

    //finder (show specifications base on selected subcategory)
    public function getspecifications($id){
            $specifications = DB::table('products')
                        ->where('subcategory_id', $id)
                        ->join('product_subspecification', 'product_subspecification.product_id', '=', 'products.id')
                        ->join('subspecifications', 'subspecifications.id', '=', 'product_subspecification.subspecification_id')
                        ->groupBy('subspecifications.id')
                        ->get();
            return response()->json($specifications);
    }

    //finder (show brands base on selected subcategory)
    public function getbrands($id){
        $specifications = DB::table('products')
                    ->where('subcategory_id', $id)
                    ->join('brands', 'brands.id', '=', 'products.brand_id')
                    ->groupBy('brand_id')
                    ->get();
                    return response()->json($specifications);
    }

Important: In order to avoid duplicated results in specifications and brands I used groupBy.

路线

Route::get('/getSubCategories/{id}', 'frontend\SearchController@getSubCategories');
Route::get('/getspecifications/{id}', 'frontend\SearchController@getspecifications');
Route::get('/getbrands/{id}', 'frontend\SearchController@getbrands');

脚本

<script type="text/javascript">
  $(document).ready(function() {
    $('select[name="category_id"]').on('change', function() {
      var categoryID = $(this).val();
      if(categoryID) {
      $.ajax({
        url: '{{ url('getSubCategories') }}/'+encodeURI(categoryID),
        type: "GET",
        dataType: "json",
        success:function(data) {
        $('select[name="subcategory_id"]').empty();
        $.each(data, function(key, value) {
            $('select[name="subcategory_id"]').append('<option class="form-control" value="'+ value['id'] +'">'+ value['title'] +'</option>');
            });
        }
      });
      }else{
        $('select[name="subcategory_id"]').empty();
      }
    });
  });
</script>

<script type="text/javascript">
  $(document).ready(function() {
    $('select[name="subcategory_id"]').on('change', function() {
      var subcategoryID = $(this).val();
      if(subcategoryID) {
      $.ajax({
        url: '{{ url('getspecifications') }}/'+encodeURI(subcategoryID),
        type: "GET",
        dataType: "json",
        success:function(data) {
        $('select[name="specification_id"]').empty();
        $.each(data, function(key, value) {
            $('select[name="specification_id"]').append(
                  "<option class='form-control' value='"+ value['id'] +"'>"+ value['title'] +"</option>"
                  );
            });
        }
      });
      }else{
        $('select[name="specification_id"]').empty();
      }
    });
  });
</script>

<script type="text/javascript">
  $(document).ready(function() {
    $('select[name="subcategory_id"]').on('change', function() {
      var subcategoryID = $(this).val();
      if(subcategoryID) {
      $.ajax({
        url: '{{ url('getbrands') }}/'+encodeURI(subcategoryID),
        type: "GET",
        dataType: "json",
        success:function(data) {
        $('select[name="brand_id"]').empty();
        $.each(data, function(key, value) {
            $('select[name="brand_id"]').append('<option class="form-control" value="'+ value['id'] +'">'+ value['title'] +'</option>');
            });
        }
      });
      }else{
        $('select[name="brand_id"]').empty();
      }
    });
  });
</script>

关于javascript - 在 Laravel 中获取基于 Ajax 的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48638054/

文章推荐： javascript - 停止表单请求，直到 ajax 请求完成

文章推荐： javascript - 内部ajax从for循环jquery获取递增变量

文章推荐： javascript - 调用 Redux 操作时 Prop 不会更新

javascript - 我需要将文本放在一个中，它位于一个 Div 中，该 Div 位于另一个 Div 中，该 Div 位于另一个 Div 中
我需要将文本放在中在一个 Div 中，在另一个 Div 中，在另一个 Div 中。所以这是它的样子: #document Change PIN
html - 两个背景图像。一个在 HTML 中，一个在 BODY 中。在 Firefox 中，主体图像未呈现
奇怪的事情发生了。我有一个基本的 html 代码。 html，头部， body 。(因为我收到了一些反对票，这里是完整的代码) 这是我的CSS: html { backgroun
ios - 将图像从 asset.xcassets 加载到 imageArray 中，并将其动态加载到 UIImageView 中，该 UIImageView 存在于 UICollectionView 中 - swift
我正在尝试将 Assets 中的一组图像加载到 UICollectionview 中存在的 ImageView 中，但每当我运行应用程序时它都会显示错误。而且也没有显示图像。我在ViewDidLoa
linux - 在 BASH 中，我需要根据 perl 脚本的输出更改一些环境变量。在 tcsh 中，我可以使用别名 eval 组合。不能在 bash 中
我需要根据带参数的 perl 脚本的输出更改一些环境变量。在 tcsh 中，我可以使用别名命令来评估 perl 脚本的输出。 tcsh: alias setsdk 'eval `/localhome/
asp.net - Windows 身份验证适用于 IIS，但不适用于 Kestrel/Microsoft.AspNetCore.Authentication.Negotiate(不在 Chrome 中，有时在 Edge 中，始终在 IE 中)？
我使用 Windows 身份验证创建了一个新的 Blazor(服务器端)应用程序，并使用 IIS Express 运行它。它将显示一条消息“Hello Domain\User!”来自右上方的以下 Ra
java - java 中 Kotlin 中的等价物是什么？
这是我的方法 void login(Event event);我想知道 Kotlin 中应该如何最佳答案在 Kotlin 中通配符运算符是 * 。它指示编译器它是未知的，但一旦知道，就不会有其他类
express - 在 Jade 中，为什么有时我可以按原样使用变量而有时必须将它们包含在#{......} 中？
看下面的代码 for story in book if story.title.length < 140 - var story
c - C 中 strstr() 中 for 循环的错误使用
我正在尝试用 C 语言学习字符串处理。我写了一个程序，它存储了一些音乐轨道，并帮助用户检查他/她想到的歌曲是否存在于存储的轨道中。这是通过要求用户输入一串字符来完成的。然后程序使用 strstr()
c - * 在 sscanf 中，* 在 [] 中
我正在学习 sscanf 并遇到如下格式字符串: sscanf("%[^:]:%[^*=]%*[*=]%n",a,b,&c); 我理解 %[^:] 部分意味着扫描直到遇到 ':' 并将其分配给 a。:
python - 在 Python (2.7.3) 中，如果 str(x) 中的任何字符在 str(y) 中(或 str(y) 在 str(x) 中)，我如何编写一个函数来回答？
def char_check(x,y): if (str(x) in y or x.find(y) > -1) or (str(y) in x or y.find(x) > -1):
ansible - 在 Ansible 中，如何将一行移动到一个 block 中？
我有一种情况，我想将文本文件中的现有行包含到一个新 block 中。 line 1 line 2 line in block line 3 line 4 应该变成 line 1 line 2 line
Django 调试工具栏显示在根 URL 中，但不显示在应用程序 URL 中
我有一个新项目，我正在尝试设置 Django 调试工具栏。首先，我尝试了快速设置，它只涉及将 'debug_toolbar' 添加到我的已安装应用程序列表中。有了这个，当我转到我的根 URL 时，调试
r - 在 R 中，Matlab 中 @ 函数句柄的等价物是什么？
在 Matlab 中，如果我有一个函数 f，例如签名是 f(a,b,c)，我可以创建一个只有一个变量 b 的函数，它将使用固定的 a=a1 和 c=c1 调用 f: g = @(b) f(a1, b,
swiftui - SwiftUI 中 ScrollView 中 VStack 元素中的神秘间距或填充
我不明白为什么 ForEach 中的元素之间有多余的垂直间距在 VStack 里面在 ScrollView 里面使用 GeometryReader 时渲染自定义水平分隔线。 Scrol
cookies - 什么应该存储在 session 中，什么应该存储在 cookie 中？
我想知道，是否有关于何时使用 session 和 cookie 的指南或最佳实践？什么应该和什么不应该存储在其中？谢谢! 最佳答案这些文档很好地了解了 session cookie 的安全问题以及
python - Python 中 matplotlib 中 3d 直方图的奇怪行为
我在 scipy/numpy 中有一个 Nx3 矩阵，我想用它制作一个 3 维条形图，其中 X 轴和 Y 轴由矩阵的第一列和第二列的值、高度确定每个条形的是矩阵中的第三列，条形的数量由 N 确定。
c - c 中 sem_init(...) 中 value 参数的不同用法
假设我用两种不同的方式初始化信号量 sem_init(&randomsem,0,1) sem_init(&randomsem,0,0) 现在， sem_wait(&randomsem) 在这两种情况下
c - 实际值存储在 pstr 中，但是该值如何存储在数组 "WORD"中
我怀疑该值如何存储在“WORD”中，因为 PStr 包含实际输出。？既然Pstr中存储的是小写到大写的字母，那么在printf中如何将其给出为“WORD”。有人可以吗？解释一下？ #include
javascript - 数组索引选择像在 numpy 中，但在 javascript 中
我有一个 3x3 数组: var my_array = [[0,1,2], [3,4,5], [6,7,8]]; 并想获得它的第一个 2
javascript - 在 Javascript 中，如何检测浏览器窗口何时在 View 中？
我意识到您可以使用如下方式轻松检查焦点: var hasFocus = true; $(window).blur(function(){ hasFocus = false; }); $(win

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 Laravel 中获取基于 Ajax 的数据

逻辑

问题

代码

额外(只是为了清楚我尝试获取的数据)

更新

代码

更新2

已解决