Ajax 值未传递给 Laravel 中的 controller

Question

I'm trying to get a value from ajax request into my controller. My js function shows desired value in alert but when I try to pass this value as data into the controller, the controller received null .

I'm not sure if this is an error with my app logic or a different problem. I would appreciate any feedback.

The form

<form>
   <input type="color" id="bgcolor" name="bgcolor">
   <button onclick="hex2rgb()">CLick</button>
</form>

The Javascript

<script>
    function hex2rgb(hex) {
        var hex = document.getElementById("bgcolor").value;
        r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
        if (r) {
            return alert(r.slice(1, 4).map(function (x) {
                return parseInt(x, 16);

                let _token   = $('meta[name="csrf-token"]').attr('content');
                $.ajax({
                    url:"{{ route('niceActionController.multiStepStore') }}",
                    method:"POST",
                    data:{hex:hex,_token:_token},
                    success: function(response){ // What to do if we succeed
                      if(data == "success")
                          alert(response);
                    },
                    error: function(response){
                      alert('Error'+response);
                    }
                })

            }));
        }
        return null;
    }
</script>

The Controller

public function multiStepStore(Request $request)
{
    $input = $request->get('hex');
    dd($input);
}

Answer 1

I think that you probles is in your token, the correct form to get a token for send in ajax is:

Blade

<form>
   <input type="color" id="bgcolor" name="bgcolor">
   <button onclick="hex2rgb()">CLick</button>
</form>

Javascript

<script>
      function hex2rgb() { //remove the data you are receiving
          var hex = document.getElementById("bgcolor").value;
          r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
          if (r) {
              return alert(r.slice(1, 4).map(function (x) {
                  return parseInt(x, 16);

                  $.ajax({
                      url:"{{ route('niceActionController.multiStepStore') }}",
                      method:"POST",
                      data:{
                          _token: "{{ csrf_token() }}",
                          hex:hex,
                      },
                      success: function(response){ // What to do if we succeed
                          console.log(response);
                      },
                      error: function(response){
                          console.log('Error'+response);
                      }
                  })

              }));
          }
          return null;
      }
</script>

Controller

public function multiStepStore(Request $request)
{
    dd($request->all());
}

Route

Route::post('/hex', 'Hexcontroller@multiStepStore')->name('niceActionController.multiStepStore');

to see the console.log you need to open your browser's inspector