如何通过ajax调用将下拉选择的值发送到laravel中的控制器

Question

我是 laravel 新手，我想通过 ajax 数据将选择的产品名称下拉选项值发送到控制器

例如：如果我从下拉列表中选择第一个 塑料产品 选项值，然后在控制器中从请求对象 I想要选择的产品名称

根据我下面的代码，我在产品名称的请求对象中得到了 null

这是我的路线：

Route::get('product', 'ProductController@index')->name('product');

这是我的控制器：

    public function index(Request $request)
        {
            if (isset($request->productName)) {
                $productName = $request->productName;
                dump($productName); // getting null
            } else {
                $productName = null;
            }
            return view('Product.product');
        }

这是我的 ajax 调用：

    function display(productName){
            productName = $('#product_filter').val(); // Here, I'm getting selected value of dropdown 
            $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{route('product')}}",
            type: "GET",
            data:{
                'productName' : productName // in header request I'm getting value [productName: plastic product] *
                },
            success:function(data){
                console.log(data);
            },
            error:function(e){
                console.log(e,'error');
            }
        });
        }

标头请求结果

我不知道我是否做错了什么， 结束时希望得到帮助，请帮助我将选定的值传递给控制器​​对象

Answer 1

我相信您收到了null，因为您正在向 Ajax 请求返回完整的 HTML。为了获取从 Ajax 发送的有效负载，您必须返回如下 JSON 响应：

public function index(Request $request)
{
    $productName = null;

    if (isset($request->productName)) {
        $productName = $request->productName;
    }

    return response()->json($productName);
}

话虽如此，如果不了解您如何调用该方法以及将数据显示到哪里，我将无法重现该问题。而且我假设您只想像在给定的 sn-p 上那样做一个console.log(data)。在这种情况下，上面的 sn-p 将起作用。

如果您想在刷新页面时保留视图以防止出现错误，只需在控制器中为该特定调用添加一个新方法并将请求发送到该端点，如下所示：

web.php

<?php

Route::get('/', [ProductController::class, 'index']);
Route::get('/productFilter', [ProductController::class, 'productFilter'])->name('dashboard-product-data');

ProductController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ProductController extends Controller
{
    public function index(Request $request)
    {
        return view('welcome');
    }

    public function productFilter(Request $request)
    {
        $productName = null;

        if (isset($request->productName)) {
            $productName = $request->productName;
        }

        return response()->json($productName);
    }
}

welcome.blade.php

<div>Product Name: <span id="product-name"></span></div>
<select id="product_filter" name="product_filter">
    <option value="plastic product">plastic product</option>
</select>

<button id="submit-button" type="button">Send data</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
    function display(productName){
        productName = $('#product_filter').val(); // Here, I'm getting selected value of dropdown 
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{route('dashboard-product-data')}}",
            type: "GET",
            data:{
                'productName' : productName // in header request I'm getting value [productName: plastic product] *
                },
            success:function(data){
                console.log(data);
                document.querySelector('#product-name').innerHTML = data
            },
            error:function(e){
                console.log(e,'error');
            }
        });
    }

    const submitButton = document.querySelector('#submit-button')
    submitButton.addEventListener('click', () => display())
</script>