如何在 Laravel5.6 中使用 AJAX 调用资源控制器的编辑方法答案

【问题标题】：How to call edit method of the resource controller using AJAX in Laravel5.6如何在 Laravel5.6 中使用 AJAX 调用资源控制器的编辑方法
【发布时间】：2018-05-14 15:30:28
【问题描述】：

在我的 laravel 项目中，我使用资源控制器进行更新。但它不工作。我试过了，但失败了。

我的刀

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <title>{{ config('app.name') }}</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
    <h1>{{ config('app.name') }}</h1>
    <form class="dis-none" id="FormAjax">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" id="name" />
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="address">Address</label>
                    <textarea class="form-control" rows="3" id="address"></textarea>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="country">Country</label>
                    <input type="text" class="form-control" id="country" />
                </div>
            </div>
        </div>
        <button type="submit" id="SaveAjax" class="btn btn-success">Save Form</button>
        <button type="button" id="cancel" class="btn btn-danger">Cancel</button>
    </form>
    <div id="ShowAjax" class="row">
        <button type="button" id="AddForm" class="btn btn-success">Add Form</button>
        <table class="table">
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Address</th>
                <th>Country</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody id="data">
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $("#AddForm").click(function () {
            $("#FormAjax").fadeIn();
            $("#ShowAjax").hide();
            $('#UpdateForm').text('Save Form');
        });
        $("#SaveAjax").click(function () {
            $("#FormAjax").hide();
            $("#ShowAjax").fadeIn();
        });
        $(document).on('click', '#cancel', function () {
            $('#name').val('');
            $('#country').val('');
            $('#address').val('');
        });
        $(document).on('click', '#edit', function () {
            $("#FormAjax").fadeIn();
            $("#ShowAjax").hide();
            name = $(this).parent().parent().find('#ename').text();
            address = $(this).parent().parent().find('#eaddress').text();
            country = $(this).parent().parent().find('#ecountry').text();
            $('#name').val(name);
            $('#address').val(address);
            $('#country').val(country);
            $('#SaveAjax').text('Edit');
            $('#SaveAjax').prop('id', 'UpdateForm');
            $('#UpdateForm').attr('data-id', $(this).data('id'));
        });
        $(document).on('click', '#UpdateForm', function () {
            name = $('#name').val();
            country = $('#country').val();
            address = $('#address').val();
            url = "peoples";
            id = $(this).data('id');
            editUrl = url + '/' + id + '/edit';
            $.get( {{ route('editUrl') }}, {name:name, country:country, address:address, id:id}, function (data) {
                console.log('success');
            });
        });
    });
</script>
</body>
</html>

路由/web.php

Route::resource('peoples', 'PeopleController');

PeopleController.php

public function edit(People $people)
    {
        if($request->ajax()) {
            $request->validate([
                'name' => 'required',
                'address' => 'required',
                'country' => 'required',
            ]);

            $people = People::find($request->id);
            $people->name = $request->name;
            $people->address = $request->address;
            $people->country = $request->country;
            $people->save();

            return response()->json();
        }
    }

当我尝试在浏览器中输入 http://localhost:8000/peoples 时，我看到了这个错误。

路线 [editUrl] 未定义。（查看：C:\xampp\htdocs\Tutorials Laravel\Ajax\resources\views\peoples.blade.php)

【问题讨论】：

标签： ajax laravel-5.6

【解决方案1】：

您不能在此处使用 route() 助手，因为您尚未命名您的路线。相反，请尝试使用 url() 帮助程序来生成 URL。

url(id . '/edit')

但是，在这里我看到另一个问题，因为 id 会在 JS 执行时动态进入，此时 Laravel 助手已经执行。所以，我建议采用以下方法：

url = {{ base_url() }} + '*apiPrefix*' + '/peoples/' + id + '/edit'

【讨论】：