I’m very new to Laravel.
I would like to pass two variables from an ajax call to a method within a class.
My ajax call (derived from various Google searches) is:
var token = $('meta[name="csrf-token"]').attr('content');
var inputValue = "Testing";
var anotherInput = "Testing2";
var data = {};
data.anotherInput = anotherInput;
data.inputValue = inputValue;
data._method = 'POST';
data._token = token;
//data: JSON.stringify(data),
$.ajax({
url: postUrl,
type: 'POST',
headers: {
'X-CSRF-TOKEN': token
},
data: JSON.stringify(data),
dataType: 'json',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
processData: false,
success:function(response)
{
console.log(response);
},
error: function(response) {
console.log(response);
}
});
The var "postUrl" is set in my layout.blade.php here:
<script>
var postUrl = "{{ route('filepathtest') }}";
</script>
The top of my Controller Class is:
namespace App\Http\Controllers;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
// use Request;
use Illuminate\Support\Facades\Input;
use Illuminate\Http\Response;
use App\Models\MainSettings;
use App\Http\Requests\MainSettingsRequest;
class MainSettingsController extends Controller
{
private string $messageTitle = "";
private $messageText = array();
/**
* Corrects path and checks it points to something.
*/
public function filePathTest(Request $request)
{
$data = $request->all();
$response = array(
'msg' => $data,
);
return response()->json($response);
}
And, finally, my route is:
Route::match(array('GET','POST'),'filepathtest', [MainSettingsController::class, 'filePathTest'])->name('filepathtest');
My response gets logged to Console.Log and I see this:
I’ve tried lots of ways of accessing the variables from the Controller but to no avail?
I’ve tried:
$data = $request->input('anotherInput');
And:
$data = $request->anotherInput;
And:
$data = $request['anotherInput'];
And:
$data = $request->post('anotherInput');
And:
$data = $request->request('anotherInput');
But they all seem to return null apart from the last one gives me an error (unless I just "use Request;" at the top instead of "use Illuminate\Http\Request;") ?
>Solution :
So this seems to be a combination of factors of your $.ajax()
request. At a minimum, this should work for POST
requests:
$.ajax({
type: 'POST', // or 'PATCH', 'DELETE', etc.
url: postUrl, // Any valid URL from your Laravel Routes or other external URL
data: postData // Any plain JS object, or `FormData`, etc.
// ...
});
In this case, there were a few issues:
data: JSON.stringify(data)
In this case, you were encoding your data
object as a single String, and sending that to the controller. $request->all()
was using that JSON string as an Array index, hence the weird ['{"anotherInput":"Testing2", ...}' => null]
output when logging via \Log::info($request->all());
This should simply be data: data
, or even just data
using JS object shorthand.
processData: false
I’m not familiar with this setting, but you can review the $.ajax()
documentation to see when it is appropriate to use this: https://api.jquery.com/jquery.ajax/
dataType
,contentType
andheaders
There wasn’t anything wrong here per-se, but review if these are actually needed when making the AJAX
request. If the _input
key is included in your data, you can probably omit headers
, but I doubt it would hurt to send it twice.
So, all in all, your code should function when refactored to:
$.ajax({
data: {
inputValue: 'Testing',
anotherInput: 'Testing2',
'_method': 'POST',
'_token': $('meta[name="csrf-token"]').attr('content'),
},
type: 'POST',
url: postUrl,
success: function(response) {
console.log(response);
},
error: function(response) {
console.log(response);
}
});
On the backend, $request->all()
should return an array with 4 indices based on the data sent, and $request->input(...)
should return the value of any of those indices, or null
if specifying an invalid index.