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
}
});
});