时间戳

首页 > 解决方案 > 如何在 Laravel 中使用 ajax 从模式中保存数据？

javascript - 如何在 Laravel 中使用 ajax 从模式中保存数据？

问题描述

我正在尝试将模式中的数据保存到数据库中，这就是我尝试过的。模态显示，表单显示，但是当我尝试保存数据时没有任何反应。在控制台中，我收到 2 个错误

  1. 加载资源失败：服务器响应状态为 500（内部服务器错误）
  2. 加载资源失败：服务器响应状态为 422（无法处理的实体）。

模态

<div class="modal fade" id="todolist-modal" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="todo-list-tile">Add New Todo</h2>
            </div>
            <div class="modal-body" id="todo-list-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="todo-list-save-btn">Save changes</button>
            </div>
        </div>
    </div>
</div>

JavaScript

$('#todo-list-save-btn').click(function(event) {
    event.preventDefault();

    var form = $('#todo-list-body form'),
    url = form.attr('action'),
    method = 'POST';

    form.find('.help-block').remove();
    form.find('.form-group').removeClass('has-error');

    $.ajax({
        url: url,
        method: method,
        data: form.serialize(),
        success: function(response) {

        },

        error: function(xhr) {

            var error = xhr.responseJSON;
            if ($.isEmptyObject(error) == false) {

                $.each(error.errors, function(key, value) {
                    $('#' + key)
                        .closest('.form-group')
                        .addClass('has-error')
                        .append('<span class="help-block"><strong>' + value + '</strong></span>')

                });
            }
        }
    });

形式

<div class="alert alert-success" id="add-new-alert" style="display:none"></div>


{!! Form::model($todoLists, ['route' => 'todolists.store']) !!}
    @csrf

    <div class="form-group">
        <label for="" class="control-label">List Name</label>
        {!! Form::text('title', 
                null, 
                [
                    'class' => 'form-control',
                    'id' => 'item',
                    'placeholder'=>'item'
                ]
            ) 
        !!}
    </div>
    <div class="form-group">
        <label for="" class="control-label">Description</label>
        {!! Form::textarea('description', 
                null, 
                [
                    'class' => 'form-control', 
                    'id' => 'description', 
                    'placeholder'=>'description',
                    'rows' => 2
                ]
            ) 
        !!}
    </div>
{!! Form::close() !!}

路线

Route::resource('todolists', 'TodoController');

控制器

public function create()
{
    $todoLists = new Todo();
    return view ('admin.todo.form', compact('todoLists'));
}

/**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function store(Request $request)
{
    $this->validate($request, [
        'title' => 'required|min:5',
        'description' => 'min:5'
    ]);

    $todoList = $request->user()
                    ->todoLists()
                    ->create($request->all());

    return view("todolists.item", compact('todoList'));
}

标签： javascriptphplaravel

解决方案

请检查您的 Todolists 模型
在您的 Todolists 模型类中：

protected $fillable = ['title', 'description'];

喜欢：

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Todolist extends Model
{
    protected $fillable = ['title', 'description'];
}

因为您使用create()方法，
并再次检查您的列以确保您的数据可以插入到数据库中。

推荐阅读