Laravel 5.4：提交 HTML 表单并接收 JSON 响应

Question

问题：如何将 JSON 从控制器传回我的 html 页面，并将响应嵌入到我的页面中，而不是破坏页面？

长篇大论是这样的：

嵌入在一个相当大的 html 页面中（当我打开我的基本 URL 时由一个视图创建，例如，http://.../home）我有一个 html 表单。它有一些数据字段，以及通常的“提交”按钮。

<form class="form-horizontal" method="POST" action="{{ route('form.user') }}">
    {{ csrf_field() }}

    ... lots of input fields ...

    <div class="form-group">
        <button type="submit" class="btn btn-primary">
            Submit
        </button>
    </div>
</form>

接收路由 ...

Route::post('form/user','ItemController@save')->name('form.user');

还有控制器...

public function save(Request $request) {

...
return response()->json(['status' => 'Saved successfully']);

}

整个事情都像预期的那样工作，如果我填写表格并点击“提交”按钮，控制器会通过 $request 属性接收所有输入字段。

从控制器返回后出现问题，从浏览器清除html，显示JSON。

我需要的是接收 JSON 并将其显示在我原始 html 的 div 中，而不是替换它。

问题：我需要做什么，我怎样才能挂钩通信来拦截和处理 JSON 响应，这样我就可以在我的原始网页中显示响应文本（使用 JQuery），而不破坏 html？

谢谢，阿明。

Answer 1

1. 捕获FORM提交事件，并防止默认。
2. 构造一个 AJAX 请求
3. 指定响应类型。
4. 将表单数据转换为序列化对象发送到服务器
5. 捕获返回的响应并将其应用于 DIV。

看起来像这样：

$('form').on('submit', function(e){
    e.preventDefault(); //1

    var $this = $(this); //alias form reference

    $.ajax({ //2
        url: $this.prop('action'),
        method: $this.prop('method'),
        dataType: 'json',  //3
        data: $this.serialize() //4
    }).done( function (response) {
        if (response.hasOwnProperty('status')) {
            $('#target-div').html(response.status); //5
        }
    });
});