Laravel Blade-View：处理 Api 响应答案

【问题标题】：Laravel Blade-View: Handling with Api RepsonseLaravel Blade-View：处理 Api 响应
【发布时间】：2019-06-13 13:17:51
【问题描述】：

假设我有一个简单的刀片视图表单，只有一个输入字段和一个提交按钮。在此字段中，您只需要写一个名称。之后，您需要单击进行 api 调用的提交按钮。

为了简化，假设 api 调用是 method:post 和 url:'api/user'

调用 api 在数据库中创建一个新用户并使用 json 响应：

{
    "id": 1,
    "name": "Im a new user",
    "created_at": 20190119
}

据我所知，如果我像下面这样实现我的 Blade.view：

<form method="POST" action="/api/user">
    @csrf
    <div class="form-group row">
        <label for="username"
               class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>

        <div class="col-md-6">
            <input id="username" type="text"
                   class="form-control"
                   name="username" value="{{ old('username') }}" required autofocus>
        </div>
    </div>
    <div class="form-group row mb-0">
        <div class="col-md-8 offset-md-4">
            <button type="submit" class="btn btn-primary">
                {{ __('Create') }}
            </button>
        </div>
    </div>
</form>

我的页面显示响应。我想要的是留在实际视图并将响应显示为警报，例如$名称。 '已创建'

API路由（routes/api.php）：

Route::post('/user', 'UserController@createUser');

路由配置（routes/web.php）：

Route::get('/user' , function () {
return view('user/create-user');
});

我知道可行的解决方案

重定向到同一页面（这意味着再次重新渲染同一页面，这并不是真正的责任 - 此解决方案导致再次加载整个页面）
在 UserController@createUser 方法中返回与数据相同的视图（与上面相同，据我所知，api 调用应以 json 响应而不是视图）

我也可以通过例如使用 Ajax查询。如您所见，有很多解决方案，但哪些是最好的。

你能说在这种情况下有最佳做法吗？

laravel 有没有开箱即用的好解决方案？

【问题讨论】：

标签： php laravel laravel-blade

【解决方案1】：

我认为您缺少一些元素，或者可能希望更多地研究一下各个部分是如何组合在一起的。您的主要要求不是特别是 Laravel 项目：

我想要的是留在实际视图并将响应显示为警报

关键不是 Laravel 的“开箱即用”，这不是 Laravel 的问题，而是如何异步更新我的页面。为此，您可能最适合使用 ajax 请求后跟 javascript/jQuery 警报。

我可能会这样做：

$('#submitButton').on('click', function (e) {
        e.preventDefault(); // Want to stay on the page, not go through normal form  
        // Might be easier to make this a NON submit button - then we can use the rest below and not have to js submit()
        // Grab any extra info via data.
        var item_type = $(this).data('item-type');
        var name = $(this).val();
        $.ajax({
            url: "{{url('user/create/')}}",
            type: "POST",
            data: {
                item_type: item_type,
                name: name
            },
            success: function (name) {
                alert(message);
                // Or, if you want a better looking alert, you can use a library like SWAL:
               swal("Success!", "New user created with a name of: "+name, "success");
            },
            error: function () {
                swal("Error", "Unable to bring up the dialog.", "error");
            }
        });
    });

您需要在控制器中处理 ajax 数据，并仅在控制器方法的 return 语句中发回名称。

如果您想更改上面的表单而不是通过警报执行此操作，请在成功函数中使用 jQuery 进行更改（如 $("#name").text(name); 或类似的东西。

【讨论】：