Передайте JSON данные из JavaScript в контроллер в laravel - PullRequest
0 голосов
/ 04 апреля 2020

У меня есть веб-приложение, в котором я получаю JSON данные из таблицы базы данных, редактирую их и хочу в конечном итоге вставить их обратно в базу данных.

tree.blade. php

@extends ('layout')

@section ('content')
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://d3js.org/d3.v5.min.js"></script>

  </head>
  <body>

    <!-- echo JSON data from model to js variable -->
    <script type="text/javascript"> var treeData = <?php echo $family->family_tree ?>; </script>

    <!-- main js file where treeData is edited -->
    <script type="text/javascript" src="{{ asset('js/main.js') }}"></script>

  </body>
</html>
@endsection

Семейство. php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;

class Family extends Model
{
    protected $table = 'families';
}

FamiliesController. php

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

use DB;
use App\Family;

//fetch first row from table and pass it to view
class FamiliesController extends Controller {
  public function showTree() {
      $family = Family::where('id', 1)->firstOrFail();

      return view('tree', [
        'family' => $family
      ]);
  }
}

?>

web. php

<?php
use Illuminate\Support\Facades\Route;

Route::get('/tree', 'FamiliesController@showTree');
?>

Итак, мой вопрос : как я могу передать данные JSON из treeData в контроллер, а затем обновить значение в таблице базы данных? Есть ли в этом «лучший метод»?

При поиске решений я нашел в основном два способа:

  1. Отправка данных с помощью AJAX с использованием XMLHttpRequest, но я обнаружил, что ему нужна ссылка на файл php, в который поступают данные. Но как это будет работать со структурой laravel?
  2. Использование формы HTML и Route::post(..);, но, очевидно, laravel v7 не поддерживает класс Form ...

1 Ответ

1 голос
/ 04 апреля 2020

простой запрос XHR с использованием Ax ios сделает это:

axios.post('/your-route-that-will-handle-the-data', {
  data: {
    json_var // you json data goes here
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
})
.then(function () {
  // always executed
});  

Теперь Ax ios используйте XmlHTTPrequest под капотом, и я бы порекомендовал его простое в использовании синтаксис

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...