Question

如何使用Ajax将Javascript变量传递给Php并检索它们？

我正在使用Jquery Ui Slider，并且在每张幻灯片上我想将javascript滑块值传递给php，以便说明。

我没有（没有多少）Ajax的经验，非常感谢帮助。

这是滑块的外观：

    $("#sliderNumCh").slider({
        range: "min",
        min: 0,
        max: 20,
        step: 1,
        value: numbersOfChapters,
        change : function(e, slider){
            $('#sliderAppendNumCh').empty();
            var i = 0;
            var sliderValue = slider.value;
            var getSliderVal = document.getElementById('sliderValue').value = sliderValue;

            $.ajax({
                type: 'POST',
                url: '',
                headers: {'X-Requested-With': 'XMLHttpRequest'},
                data: {
                    value: getSliderVal
                },
                success: function (option) {
                    console.log(getSliderVal);
                }
            });
            ...
      }
  })

我的路线示例：

编辑我的路线现在看起来像这样：

Route::post('edit/{productID}', ['as' => 'editProductPost', 'uses' => 'ProductController@editProduct']);

编辑我尝试过的内容：

url: '{{ route("editProductWeb") }}',

并收到此错误：

POST http://localhost/myApp/public/product/edit/%7BproductID%7D 500 (Internal Server Error)

并尝试了这个：

url: 'edit',

并收到此错误：

POST http://localhost/myApp/public/product/edit 500 (Internal Server Error)

编辑我的编辑控制器方法：

public function editProduct($productRomID = 0)
{
    $product = ProductRom::find($productID);
    $sheets  = Chapters::where('product_id', '=', $productID)->get();

    $productId = $product->id;

    $sheetCount    = count($sheets);

    return view('product.edit', [
        'productId' => $productId,
        'product' => $product,
        'sheets' => $sheets,
        'sheetCount' => $sheetCount,
        'type' => 'edit',
        'route' => 'updateProductRom'
    ]);
}

到目前为止

编辑使用haakym建议：

            $.ajax({
                type: 'post',
                url: "{{ Route('editProduct', $product->id) }}",
                headers: {'X-Requested-With': 'XMLHttpRequest'},
                data: {
                    value: getSliderVal,
                    productId : getPrId
                },
                success: function (option) {
                    console.log(getSliderVal);
                }
            });

会在我的调试中打印id +当前滑块值，因此到目前为止工作正常。现在我需要获取该值并在我的视图中使用它（php）任何建议如何继续？

在我的控制器方法中使用它：

$sliderValue = $request->input('value');

给我回报

空

编辑我也试过了：

$sliderValue = Input::get('value');

也让我回来了

空

修改我添加了一个日志：

Log::info(Input::all());

这会在幻灯片上显示正确的滑块值和产品ID。但我的Input::get('value')仍然会返回null

修改我想我应该添加以下信息：

我现在改变了我的路线：

Route::get('edit/{productID}', ['as' => 'editProduct', 'uses' => 'ProductController@editProduct']);
Route::post('edit/{productID}', ['as' => 'editProductPost', 'uses' => 'ProductController@editProductPost']);

get显示特定产品的数据库中的数据并在我的视图中显示，我添加了post一个以将slidervalue数据发布到editProductPost方法并返回之后编辑视图中的值（sliderValue）是正确的吗？（顺便说一句仍然不起作用）

修改

如果我把它放在我的控制器方法中：

if ($request->isMethod('post')){
    return response()->json(['response' => 'This is post method']);
}

return response()->json(['response' => 'This is get method']);

我一直收到以下错误（如果我滑动）：

POST http://localhost/myApp/public/product/edit/54 500（内部服务器错误）

我脑子里有这个：

<meta name="csrf-token" content="{{ csrf_token() }}">

并把它放在我的ajax帖子之前：

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

修改

这样做会在日志中返回正确的当前滑块值：

Log::info($request->get('value'));

我试过了：

    return view('productRom.edit', [
        'value' => $value,
    ]);

但我在控制台中收到错误：

无法加载资源：服务器响应状态为500 （内部服务器错误）http://localhost/myApp/public/product/edit/73

Answer 1

正如@julqas所说，您需要在$.ajax()方法中包含该网址。

当您有一条命名路线editProduct时，您可以使用刀片输出链接：

$.ajax({
  type: 'POST',
  url: '{{ route("editProduct" }}',
  ...

修改1 ：

您的路线是get，而您的ajax方法是post，我想这就是问题所在。你需要让它们变得一样。

如果您将路由更改为post，则需要在发送时将CSRF令牌添加到ajax请求中。有关如何在此处执行此操作的文档的一些指导：

https://laravel.com/docs/5.2/routing#csrf-x-csrf-token

文档建议在HTML头中添加：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后在发送请求之前使用以下代码：

$.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
});

或者你可以在ajax调用中将它添加到请求中。

修改2

一个侧面点 - 我只是猜测错误是什么，如果我问你是否可以自己调试它以查看错误是什么会更好。学习调试ajax请求非常有用而且不太困难。

执行此操作的最佳方法是在发出ajax请求时使用所选浏览器中的开发人员控制台。如果您使用Chrome打开Developer tools，请在提出请求之前单击Network标签。发出请求后，您可以检查请求及其详细信息。希望有所帮助！

编辑3

我会将您的editProduct()方法更改为不接受任何参数，而是从请求中获取产品的id值

public function editProduct()
{
    // value here is referring to the key "value" in the ajax request
    $product = ProductRom::find(\Request::get('value');
    ...
}

考虑将json中的value键更改为更有用的内容，例如productId

data: {
    productId: getSliderVal
}

Answer 2

您尚未输入'url'的值。创建任何路线，然后将其放入网址：'{any_route_name}'，然后在控制台天气中检查您的价值是否已过帐

你必须为你的等级做一些研发。

Laravel使用AJAX将Javascript变量传递给PHP并检索

2 个答案: