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？

Thx，Armin。

Answer 1

捕获FORM提交事件，并阻止默认值。
构建AJAX请求
指示响应类型。
将表单数据转换为要发送到服务器的序列化对象
捕获返回的响应并将其应用于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
        }
    });
});

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

1 个答案: