Laravel - 如何使用 Ajax 将数据从复选框按钮发送到控制器答案

【问题标题】：Laravel - How to send data from a checkbox button to a controller using AjaxLaravel - 如何使用 Ajax 将数据从复选框按钮发送到控制器
【发布时间】：2019-12-29 17:02:19
【问题描述】：

我正在尝试使用一个切换按钮（复选框）来更改我的 MySQL 数据库中的一些数据。我本质上想拥有一个不错的管理站点，我可以在其中通过一个不错的开/关开关将用户解锁到站点上的某些功能。

一切似乎都设置正确，但我的控制器根本没有反应或被触发。

现在，我的视图中有一个有效的切换按钮触发了一个 javascript 函数。在那个 javascript 函数中，我已经设置了要传输到控制器的数据。

我还在我的 Javascript 中设置了 Ajax。显然，Ajax 在其代码中有这一部分（如果您需要了解我的意思，请参阅我的代码），其中显示“成功”或“错误”。在输入 {{csrf_token()}} 令牌之前，我总是在错误部分结束。但是，现在我在切换按钮时总是进入“成功”部分。

现在我的问题：尽管 Ajax 确认成功，但实际上我的控制器内没有任何反应。我不知道如何更改它，因为也没有任何错误代码。

这是我的按钮

<input id = "company_{{$company->id}}" data-id="{{$company->id}}" onchange=myFunction({{$company->id}}) value = {{$company->permissionlevel}} class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $company->permissionlevel ? 'checked' : '' }}>

这是我的 javascript（相关部分）

var test = 12; // A random variable for this example

        $.ajax({
            method: 'POST', // Type of response and matches what we said in the route
            url: 'home/update', // This is the url we gave in the route
            data: {'test' : test, _token: '{{csrf_token()}}'}, // a JSON object to send back
            success: function(response){ // What to do if we succeed
                console.log(response); 
                //alert("Ajax success");
            },
            error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
                //alert("Ajax error");
            }
        });

这是我的控制器功能（只是为了看看会发生什么）

public function update (Request $request)
    {

            //echo "This is a test";
            $data = $request->all(); // This will get all the request data.
            dd($data); // This will dump and die
            return $data;



        }

路线

Route::post('/home/update', 'HomeController@update');

预期结果：控制器向我扔东西。目前我只想看看我的控制器是否对按钮按下做出反应，或者我是否可以请求 Ajax 应该发送的数据。

实际结果：我的控制器没有任何反应

【问题讨论】：

检查器中的控制台和网络选项卡显示什么？
{test: "12", _token: "mssayxmlw6k3t8IZrIz5WUGMZYLjThFKXuSeCRJk"} 测试: "12" _token: "mssayxmlw6k3t8IZrIz5WUGMZYLjThFKXuSeCRJk" proto: Object
从控制台输出的样子来看，我认为确实发生了一些事情。但是，如果我在控制器上输入错误的内容，控制台就会充满错误。 $test = $request->input('value');后跟一个 echo $test;工作得很好，我在控制台上得到了实际输出。然而，像 $user->save(); 这样简单的东西向我抛出大量错误，类似 $user->id = 5;这个命令甚至会抛出一个完整的错误控制台

标签： ajax laravel controller send

【解决方案1】：

我自己找到了解决方案。我基本上将此代码添加到我的控制器：

public function update (Request $request, $id, User $user)
{
$newPermLevel = $request->input('value');
    $override = (int) $newPermLevel;

    \DB::table('users')->where('id',$id)->update(array(
       'permissionlevel'=>$override,
     ));
}

但是，我需要在命名空间后面的控制器开头添加这些小行：

use Illuminate\Http\Request;
use App\User;

为了完成，我将在这里留下其他必要的代码，以及任何需要使用切换/切换按钮更新他的数据库的人

这是我的路线

Route::post('/home/update/{id}', 'HomeController@update');

这是我的 HTML 根据按钮的当前状态，我创建了一个 if 语句（使用刀片引擎）创建一个关闭或打开的开关。按钮有一个值，它本质上是当前数据库条目（在我的例子中，我想要来回跳转的是 1 或 0）

@if ($company->permissionlevel == 0)
<div class="col-sm-5">
  <label class="switch">
  <input id = "company_{{$company->id}}" data-id="{{$company->id}}" onchange=myFunction({{$company->id}}) value = {{$company->permissionlevel}} class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $company->permissionlevel ? 'checked' : '' }}>
    <span class="slider round"></span>
   </label>
</div>
@endif @if ($company->permissionlevel == 1)
<div class="col-sm-5">
  <label class="switch">
  <input id = "company_{{$company->id}}" data-id="{{$company->id}}" onchange=myFunction({{$company->id}}) value = {{$company->permissionlevel}} class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $company->permissionlevel ? 'checked' : '' }}>
    <span class="slider round"></span>
    </label>
</div>
@endif

最后，我的 Javascript 使用了 Ajax。该代码主要检查 out 开关的值当前是为 0（然后将其切换为 1）还是在 1（然后将其切换为 0）。此外，我定义了一个变量来获取当前用户（公司的 ID），以便控制器稍后知道我指的是哪个用户。

<script>
  function myFunction(id) {
 
        var value = document.getElementById("company_" + id).value;
        

        if (value == 1){
            document.getElementById("company_" + id).value = 0;
            //alert(document.getElementById("company_" + id).value);
        }
        if (value == 0){         
            document.getElementById("company_" + id).value = 1;
            //alert(document.getElementById("company_" + id).value);
        }
    
        var company_id = id;
        var newPermLevel = document.getElementById("company_" + id).value;


        $.ajax({
            method: 'POST', // Type of response and matches what we said in the route
            url: 'home/update/'+company_id, // This is the url we gave in the route
            data: {
            'company_id' : company_id, 
            'value' : newPermLevel,
            _token: '{{csrf_token()}}',
            
            },
             // a JSON object to send back
            success: function(response){ // What to do if we succeed
                console.log(response); 
                //alert("Ajax success");
            },
            error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
                //alert("Ajax error");
            }
        });

        
    }
</script>

请考虑关闭此问题，但感谢您的阅读。我希望任何在谷歌上拼命寻找类似解决方案的人都可以使用我的代码。 并非所有英雄都穿着斗篷 :)

【讨论】：