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

Question

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

例如：如果我是select第一个塑料制品下拉菜单中的选项值然后在来自请求对象的控制器中我想要 selected 产品名称

as per my below code I'm getting null in the request object of the product name

这是我的路线：

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');
            }
        });
        }

header request result

我不知道我做错了什么，最后想得到帮助请帮助我获得控制器对象的 selected 值

Answer 1

我相信您得到了 null，因为您正在 return 对 Ajax 请求进行完整的 HTML。为了获得从 Ajax 发送的有效负载，您必须 return 一个 JSON 响应，如下所示：

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

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

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

话虽这么说，但我无法在不了解您如何调用方法以及将数据显示到何处的情况下重现该问题。而且我假设您只想像在给定代码段上所做的那样简单地执行 console.log(data) 。在这种情况下，上面的代码片段将起作用。

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

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>

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

How to send dropdown selected value through ajax call to controller in laravel

php

ajax

controller

laravel

laravel-8