Javascript 使用ajax在同一页面中显示特定类别（ajax、laravel）的产品

我对一项任务有些问题。我对javascript不是很在行。请帮忙

我将类别显示为一个按钮，我希望在按下按钮时显示分配给每个类别的产品，以及以按钮形式显示的产品。在下一个任务中，我必须确保当按下产品按钮时，该产品被添加到列表中，同时也不会刷新页面

控制器：

刀片

---

你的数据库结构应该是

迁移

类别

产品

类别模型

产品模型

现在，您应该有如下控制器文件：

下拉控制器

你的路线应该是

路线

在此之后，在编辑表单中，要显示某个类别的关联产品，请执行以下操作

<div class="col-md-12">
        <div class="col-md-6">
            <label>Category</label>
            <select class="form-control" name = "category">
                <option value="0">Please Select Category</option>
                @foreach($categories as $category)
                    <option value="{{$category->id}}">{{$category->name}}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6">
            <label>Products</label>
            <select class="form-control" name = "product">
                <option value="0">Please Select Product</option>
                @foreach($products as $product)
                    <option value="{{$product->id}}">{{$product->name}}</option>
                @endforeach

            </select>
        </div>
    </div>

你的ajax脚本像

阿贾克斯

---

这相当大，但很容易理解它是如何工作的。我希望您能理解。

所以，当选择category时，您希望使用ajax调用显示该类别的所有产品，这样就不必进行页面刷新。是的，我也不知道该怎么做。我不明白上面的代码有什么问题，但我用两个选择器做了类似的事情。一个用于类别，另一个用于产品。当选择类别时，会进行ajax调用，然后检索与该类别关联的所有产品并显示在另一个选择器中。如果您愿意，可以在此处发布的产品非常多。请告诉我。您可以通过电子邮件向我发送示例吗？请如果您需要解释上述代码中的任何内容，请随时询问：

Route::get('/masa/{id}','HomeController@categories')->name('table');
Route::get('/produse', 'HomeController@produse')->name('products');

@extends('layouts.app')
@section('content')
    <div class="container-fluid">
        <div class="row title">
            <h2 style="text-align: center;  margin: auto;">{{$table->name}}</h2>
        </div>
        <div class="row">
            <div class="col-sm-4 col-xs-4 col-md-4 col-lg-4 product-table">
                <div class="row">
                    <button class="btn btn-dark product-button">
                        {{$table->name}}
                    </button>
                </div>
            </div>
            <div class="col-sm-8 col-xs-8 col-md-8 col-lg-8 product-table">
                <div class="row">
                    {{--Categorii--}}
                    @foreach($categories as $category)
                        <button class="btn btn-dark product-button" id="cat-{{$category->id}}">{{$category->name}}</button>
                    @endforeach
                </div>
                <hr><br>
                <div class="row" id="products">
                    <button class="btn btn-dark product-button">Product Button</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.3.1/jquery.twbsPagination.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    {{--<script src="{{asset('/js/script.js')}}"></script>--}}
    <script type="text/javascript">
        $('select[cat-{{$category->id}}]').on('click', function () {
            $.ajax(
                url: "{{route('products')}}",
                type: 'post',
                data: {
                    'category': '{{$category->name}}',
                    "_token": "{{ csrf_token() }}"
                },
                success: function (data) {
                    $('.product-table').after(data.response);
                }
            });
        });
    </script>
@endsection

    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('categories');
    }

/**
 * Run the migrations.
 *
 * @return void
 */
public function up()
{
    Schema::create('products', function (Blueprint $table) {
        $table->increments('id');
        $table->integer('category_id')->unsigned();
        $table->string('name');
        $table->timestamps();

        $table->foreign('category_id')->references('id')->on('categories');
    });
}

/**
 * Reverse the migrations.
 *
 * @return void
 */
public function down()
{
    Schema::dropIfExists('products');
}

class Category extends Model
{
    //
    public function products()
    {
        return $this->hasMany('App\Product');
    }
}

class Product extends Model
{
    //
    public function category()
    {
        return $this->belongsTo('App\Category');
    }
}

class DropDownController extends Controller
{
    //

    public function index(){

        $categories = Category::all();
        $products = Product::all();

        return view('dropdown.dropdown', compact('categories','products'));
    }

    public function getProducts($id){
        if($id!=0){
            $products = Category::find($id)->products()->select('id', 'name')->get()->toArray();
        }else{
            $products = Product::all()->toArray();
        }
        return response()->json($products);
    }
}

Route::get('/dropdown','DropDownController@index');
Route::get('category/{id}/products', 'DropDownController@getProducts');

<div class="col-md-12">
        <div class="col-md-6">
            <label>Category</label>
            <select class="form-control" name = "category">
                <option value="0">Please Select Category</option>
                @foreach($categories as $category)
                    <option value="{{$category->id}}">{{$category->name}}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6">
            <label>Products</label>
            <select class="form-control" name = "product">
                <option value="0">Please Select Product</option>
                @foreach($products as $product)
                    <option value="{{$product->id}}">{{$product->name}}</option>
                @endforeach

            </select>
        </div>
    </div>

<script>
jQuery(document).ready(function ($) {
    $('select[name=category]').on('change', function () {
        var selected = $(this).find(":selected").attr('value');
        $.ajax({
                    url: base_url + '/category/'+selected+'/products/',
                    type: 'GET',
                    dataType: 'json',

            }).done(function (data) {

                var select = $('select[name=product]');
                select.empty();
                select.append('<option value="0" >Please Select Product</option>');
                $.each(data,function(key, value) {
                    select.append('<option value=' + key.id + '>' + value.name + '</option>');
                });
                console.log("success");
        })
    });
});
</script>