Error passing data to php using AJAX(Laravel)

Question

Good afternoon, I am trying to pass data from my form to the controller using Ajax, however I cannot do it correctly, what am I doing wrong?

Javascript

$("#btn_enviar").click(function() {

    title = document.getElementById("title").value;
    url_clean = document.getElementById("url_clean").value;
    content = document.getElementById("content").value;
    CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

    $.ajax({
        url     :  'dashboard/post/{data}',
        type    :  'post',
        dataType:  'json',
        data    :   {'CSRF_TOKEN':CSRF_TOKEN, 'title':title, 'url_clean':url_clean, 'content':content},
        success :   function (data) {
            alert('send');
        },
        error   :   function() {
            alert('error');
        }
    });

 });

Routes

<?php

use Illuminate\Support\Facades\Route;



Route::get('/', function () {
    return view('dashboard.posts.posts');
});

Route::resource('dashboard/post','dashboard\PostController');

Route::post('dashboard/post/{data}', 'dashboard\PostController@store');

when I click on the button, the console shows me the following error:

This has the validation rules for the submitted data

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StorePostPost extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'title' => 'required|min:5|max:500',
            'url_clean' => 'required|min:5|max:500',
            'content' => 'required|min:5' 
        ];
    }
}

This is the controller I'm trying to send the data to (PostController)

<?php

namespace App\Http\Controllers\dashboard;

use App\Post;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Http\Requests\StorePostPost;
use Illuminate\Support\Facades\Route;

class PostController extends Controller
{
    public function index(){

        return view("dashboard.posts.create");
    }

    public function create(){

        return view("dashboard.posts.create");
    }

    public function store(StorePostPost $request){
        
        dd($request->all());

    }
}

STA · Accepted Answer · 2020-11-07 16:55:14Z

1

On POST route, you don't need to define the parameter {data}, because it pass through POST Request, so change it to :

Route::post('dashboard/post/', 'dashboard\PostController@store');

And your Ajax :

$.ajax({
    url     :  '/dashboard/post/',
    type    :  'post',
    dataType:  'json',
    traditional: true,
    data    :   {'CSRF_TOKEN':CSRF_TOKEN, 'title':title, 'url_clean':url_clean, 'content':content},
    success :   function (data) {
        alert('send');
    },
    error   :   function() {
        alert('error');
    }
});

edited Nov 7, 2020 at 16:55

answered Nov 7, 2020 at 15:38

STA

35.3k9 gold badges49 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kvothe_0077 Over a year ago

this no longer generates an error by console, however, success is not executed

Daniël den Hollander · Accepted Answer · 2020-11-09 07:04:43Z

0

Can you please provider is with the code in the store function in the controller?

The answer from @sta is correct but probably your controller code does not give the correct response back.

Also worth mentioning. You forget to add the laravel methode. So you should add '_method' :'POST' to your data object

And off topic, why should u get all the value out a form via a getelementbyid? If you Get the naming correctly u can also do it like this:

Let data = New FormData($('#form_id')) ;

Something like this. Don't have tested it to be honest.

edit: okay so this is how i think you should do it: Routes.php >

Route::resource('dashboard/post','dashboard\PostController');

the reason i dont include your custom url to store is that in the case you showed you dont even need it. in the resource there i already a store which you can call by ajax. If you ever need to change the store url use this:

Route::resource('dashboard/post','dashboard\PostController',['except'=>['store']]);

Route::post('dashboard/post/{data}', 'dashboard\PostController@store');

here i exclude the store from the resource routes so you don't have 2 routes pointing at the exact same function.

PostController.php

    public function store(StorePostPost $request){
        
        logger($request->all();
        return response()->json();

    }

i log you request which will now be found in the file /storage/logs/LOGNAME.log then i send back an empty json response with a 200 status. which is default. so this should come in the succes function.

Now your javascript:

$("#btn_enviar").click(function() {

    title = document.getElementById("title").value;
    url_clean = document.getElementById("url_clean").value;
    content = document.getElementById("content").value;
    CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

    $.ajax({
        url     :  '/dashboard/post',
        type    :  'post',
        dataType:  'json',
        data    :   {
           '_token':CSRF_TOKEN, 
           '_method':'POST',
           'title':title,
           'url_clean':url_clean,
           'content':content
        },
        success :   function (data) {
            alert('send');
        },
        error   :   function() {
            alert('error');
        }
    });

 });

now if you realy want to pass a parameter to you url by ajax you should use this:

        url     :  `/dashboard/post/${data}`,

or

        url     :  '/dashboard/post/' + data,

but in this case data is not defined in the code you give so it is kinda obvious why that doesn't work

edited Nov 9, 2020 at 7:04

answered Nov 7, 2020 at 21:38

Daniël den Hollander

513 bronze badges

6 Comments

Kvothe_0077 Over a year ago

Thanks for taking the trouble, I have edited my code

Daniël den Hollander Over a year ago

I personally always log the request while debugging ajax. Cause a dd you won't even see in the browser. Only in the netwerk tab. But the problem now is stil that the URL is incorrect. First of all the URL you are trying to create does already exist because off the resource. So you should exclude that URL of the resource. Second, I don't Get why you want to override the store URL cause the extra parameters you probably want to give to the store function could easily being added to the request without the need for the URL parameter.

Daniël den Hollander Over a year ago

And if you don't Get an error, which is Possible because of using ajax. You should watch in the storage/logs folder for a log file where Possibly is A log with an error of what actually is going on. For easier use of logs i recomend chanching the log_channel to daily in your env so you Get your logs in a day separated file.

Kvothe_0077 Over a year ago

It has not been very clear to me that excluding the url, I am seeing a laravel course, but they do not use ajax, so I started looking for information. Could you add the code that you consider correct please?

Daniël den Hollander Over a year ago

if this helped you could you consider marking this answer as correct? if not let me know

|

justrusty · Accepted Answer · 2020-11-07 15:50:44Z

0

You are using a relative URL. Try url: '/dashboard/post/{data}' with a leading slash

answered Nov 7, 2020 at 15:50

justrusty

8467 silver badges10 bronze badges

Comments

Mustafa Poya · Accepted Answer · 2020-11-07 15:53:46Z

0

as the image shown the error the url path dashboard/post/{data} the {data} is a parameter value which have to be passed to the function.
2) the dashboard/post/{data} is repeating as 'dashboard/post/dashboard/post/{data}' which you need to set the url : 'dashboard/post/{data}' to url : '/dashboard/post/{data}' and {data} should be a value like object_id or something else.

answered Nov 7, 2020 at 15:53

Mustafa Poya

3,1236 gold badges30 silver badges48 bronze badges

1 Comment

Kvothe_0077 Over a year ago

Thanks for your answer, although that doesn't work, neither do the other answers: C url : '/dashboard/post/{data}', show edh.test/dashboard/post/%7Bdata%7D

Med.ZAIRI · Accepted Answer · 2020-11-07 16:14:46Z

0

1- Remove the {data} from the url in ajax (it's not needed there) like:

url     :  '/dashboard/post/',

2- as I know, laravel csrf_token field should be _token in the data fields,like:

data    :   {'_token':CSRF_TOKEN, 'title':title, 'url_clean'..

answered Nov 7, 2020 at 16:14

Med.ZAIRI

3103 silver badges6 bronze badges

Comments

Aravindh · Accepted Answer · 2020-11-07 17:45:47Z

0

Give your full url to ajax url param. You are using resource routes, so in get route, your url will be base_url+/dashboard/post.

In post ajax it is calling your current page url and appending given url path.

answered Nov 7, 2020 at 17:45

Aravindh

93 bronze badges

Collectives™ on Stack Overflow

Error passing data to php using AJAX(Laravel)

6 Answers 6

1 Comment

6 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

6 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related