Insert data to MySQL with Ajax in Laravel

Question

I have a JS variable which store a JSON value in my blade view and I want to insert it to MySQL in Laravel project. But I don't know how to write it right. This is what I tried in my blade view:

<body>
    <div id="fb-editor"></div>

    <div id="saveToDatabase">
      <button id="saveBtn" type="button">Save To Database</button>
    </div>
</body>

<script>
  var formBuilder = $('#fb-editor').formBuilder();

  

  $("#saveBtn").click(function() {
  	var mFormData = formBuilder.actions.getData(); //my JSON data 
  	
  	$.ajax({
  		type: 'POST',
  		url: '/saveToDatabase',
  		data: {"mFormData":mFormData}
  	}).done(function (msg) {
  		alert("Data saved!");
  	});
  });
  
</script>

But when I run it, it appear error said: jquery.js:8630 POST http://localhost/saveToDatabase 404 (Not Found).

How I can fix this?

Thank you very much!

I only write code in blade view so I think I can use default route in web.php. Am I wrong? — Tomato
– Tomato, Commented May 31, 2019 at 2:50
You using Laravel then why do you code use mysqli_connect? — Ryan Nghiem
– Ryan Nghiem, Commented May 31, 2019 at 2:57
That is my 2 .php file I put in xampp htdocs folder to run. I just show it for you to understand what I am doing. I want to do that in Laravel. — Tomato
– Tomato, Commented May 31, 2019 at 3:11
appears because the route in laravel is not defined in web.php. Have you add the route in web.php ? — Kelvin
– Kelvin, Commented May 31, 2019 at 3:45

Jijin P · Accepted Answer · 2019-05-31 07:29:43Z

2

First, enter your database details on .env file.

You need to use two routes. One for the blade file to render and another for the api request.

On routes/web.php, define your route,

Route::get('/', function(){ return view('app');});

Create app.blade.php in resources/views/ folder with your HTML code.

On routes/api.php, define your route like this

Route::post('saveToDatabase','HomeController@saveToDb')

Next, you need to create saveToDb method on the HomeController.

Open App\Http\Controller\HomeController.php

Create a new method

public function saveToDb()
{
  // Database Insertion Code goes here

}

Laravel Provide CSRF Protection to the POST request. So add Exception to this route by adding it in the App\Http\Middleware\VerifyCSRFToken.php

  protected $except = [
        'api/*'
    ];

For the insertion operation, we can do this with the help of the model.

So first create Form.php in App\ folder.

Inside that, we specify the fields of the database.

<?php

use Illuminate\Database\Eloquent\Model;

class Form extends Model
{
    protected $fillable = [
        "key", "data"
    ];

    protected $hidden = [];

}

Next, we can use this model to insert data to the Form table.

In your HomeController.php at the top

use App\Form;
use Request;

Now we can update the saveToDb function that we write before.

public function saveToDb()
{
  // Request all the post data
  $req = Request::all();    
  // From that post data store key and data part to form table
  Form::create($req);
}

If you have any issue in route, controller or model. Refer Laravel official docs: https://laravel.com/docs/5.8/routing

And this one is also useful to get started to laravel. https://laracasts.com/series/laravel-from-scratch-2018

edited May 31, 2019 at 7:29

answered May 31, 2019 at 2:58

Jijin P

2681 gold badge10 silver badges21 bronze badges

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

7 Comments

Tomato Over a year ago

Hmm where I should write insert query?

Jijin P Over a year ago

Yes. Instead of model, you can use like this $values = array('key' => 1,'data' => 'Dayle'); DB::table('form')->insert($values);

Tomato Over a year ago

But my JSON values is stored in a JS variable in blade view which is var mFormData = formBuilder.actions.getData(); //JSON data return. How I can use this in query?

Jijin P Over a year ago

When you write return $data; in the controller method. It will return the json data. Do you want to return the data from the database to json?

Tomato Over a year ago

Maybe you are misunderstand my problem. I edited my post. I have a JS variable which is store my JSON values. Now I want to insert that JSON values to my database. I don't need to return data form the database. I configed in .env file like you say and created model and controller. What should I do next? Thank you!

|

Ramin Roshan · Accepted Answer · 2019-05-31 04:57:51Z

0

The route is not selected correctly. http://localhost/saveToDatabase is not find for do something

answered May 31, 2019 at 4:57

Ramin Roshan

5361 gold badge5 silver badges10 bronze badges

2 Comments

Tomato Over a year ago

Yes. I think because that url don't have in web.php. But I write only ajax in blade view, I don't have any controller and function, I don't know how to write route for this.

Ramin Roshan Over a year ago

Jijin P say how do this in above. remember post need CSRF in laravel.

Collectives™ on Stack Overflow

Insert data to MySQL with Ajax in Laravel

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related