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

时间:2018-05-14 15:30:29

标签: ajax laravel-5.6

在我的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的\资源\视图\ peoples.blade.php)

2 个答案:

答案 0 :(得分:0)

由于您没有为路线命名,因此无法在此处使用route()助手。相反,请尝试使用url()帮助程序生成URL。

url(id . '/edit')

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

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

答案 1 :(得分:0)

我编写的代码如下。它不起作用。这是对的吗?

$(document).on('click', '#UpdateForm', function () {
            name = $('#name').val();
            country = $('#country').val();
            address = $('#address').val();
            url = "{{ route('peoples.store') }}" + '*apiPrefix*' + '/peoples/' + id + '/edit';
            id = $(this).data('id');
            editUrl = url + '/' + id + '/edit';
            $.get( editUrl ), {name:name, country:country, address:address, id:id}, function (data) {
                console.log('success');
            });
        });