javascript - 使用 Laravel 将数据存储为具有 ajax 功能的 API

Question

我在 index.blade 中有这段代码:

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="col-sm-offset-2 col-sm-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    New Task
                </div>

                <div class="panel-body">
                    <!-- Display Validation Errors -->
                    @include('common.errors')

                    <!-- New Task Form -->
                    <form action="/task" method="POST" class="form-horizontal">
                        {{ csrf_field() }}

                        <!-- Task Name -->
                        <div class="form-group">
                            <label for="task-name" class="col-sm-3 control-label">Task</label>

                            <div class="col-sm-6">
                                <input type="text" name="name" id="task-name" class="form-control" value="{{ old('task') }}">
                            </div>
                        </div>

                        <!-- Add Task Button -->
                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-6">
                                <button type="submit" class="btn btn-default">
                                    <i class="fa fa-btn fa-plus"></i>Add Task
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Current Tasks -->
            @if (count($tasks) > 0)
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Current Tasks
                    </div>

                    <div class="panel-body">
                        <table class="table table-striped task-table">
                            <thead>
                                <th>Task</th>
                                <th>&nbsp;</th>
                            </thead>
                            <tbody>
                                @foreach ($tasks as $task)
                                    <tr>
                                        <td class="table-text"><div>{{ $task->name }}</div></td>

                                        <!-- Task Delete Button -->
                                        <td class="text-right">
                                            <form action="/task/{{ $task->id }}" method="POST">
                                                {{ csrf_field() }}
                                                {{ method_field('DELETE') }}

                                                <button type="submit" id="delete-task-{{ $task->id }}" class="btn btn-danger">
                                                    <i class="fa fa-btn fa-trash"></i>Delete
                                                </button>
    </form>
    </td>
    </tr>
    @endforeach
    </tbody>
    </table>
    </div>
    </div>
    @endif
    </div>
    </div>

这很好用... 现在 - 只是为了好玩，我尝试使用 jquery ajax 存储数据，所以我编写函数 dodaj() :

function dodaj(){

            var name = 'JASAMBRE';

            $.ajax({
                url: "/store",
                type: "POST",
                async: true,
                data: {
                    name: name
                },
                dataType: "html",

                success: function (data) {
                    console.log(data);

                },
                error: function (data) {
                    console.log(data);
                    console.log('GRESKA NEKA');
                }


            });
        }

现在，当我从浏览器运行函数时，我得到 500 Internal Server error。

我现在必须发送我的身份验证数据，但我如何使用 jquery ajax 存储数据？

更新:我尝试:

$.ajaxPrefilter(function(options, originalOptions, xhr) {
            var token = $('meta[name="csrf_token"]').attr('content');

            if (token) {
                return xhr.setRequestHeader('X-XSRF-TOKEN', token);
            }
        });
        function dodaj(){

            var name = 'JASAMBRE';

            $.ajax({
                url: "/store",
                beforeSend: function (xhr) {
                    var token = $('meta[name="csrf_token"]').attr('content');

                    if (token) {
                        return xhr.setRequestHeader('X-XSRF-TOKEN', token);
                    }
                },
                type: "POST",
                async: true,
                data: {
                    name: name
                },
                dataType: 'json',

                success: function (data) {
                    console.log(data);

                },
                error: function (data) {
                    console.log(data);
                    console.log('GRESKA NEKA');
                }


            });
        }

Answer 1

当使用 csrf_field() 时，它会创建一个名为“_token”的隐藏字段，您可以使用浏览器上的“查看源代码”功能来验证它。 无论如何，您可以做的是在执行 HTTP 请求时获取此字段的值并将其附加到您的数据中。

// knowing that this field exists
var token = document.getElementsByName('_token')[0].value;
$.ajax({
  url: '/task',
  type: 'POST',
  data: {
     name: name,
     _token: token
  },
  ...      
});