使用Laravel作为API存储数据，并带有ajax功能

Store data with Laravel as API with ajax function

本文关键字：ajax 功能数据 Laravel 作为 API 存储使用更新时间：2023-09-26

我在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');
                }

            });
        }

使用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
  },
  ...      
});