我的页面上有一个表单。提交后，我会在表格中添加额外的数据以供提交。我可以通过ajax提交序列化的表单数据，但我无法成功处理响应。响应来自Laravel，包括重定向URL、会话"成功"或"错误"消息，以及表单错误重定向上可能的表单数据。
JS提交功能
function submit() {
var formData = $('#form').serializeArray();
formData.push({ name: "additional_data", value: additional_data });
$.ajax({
type: "POST",
url: "/submit_form_data",
data: formData,
success: function(data) {
// response includes redirect url, session data ('success' or 'error' + message), form data (if form error)
}
});
}
Laravel数据提交路线
public function submitData(Request $request) {
$data = $request->all();
// check for form error and redirect back with error message and form input
$validator = Validator::make($data);
if ($validator->fails()) {
return redirect()
->back()
->withErrors($validator)
->withInput();
}
// submit data and redirect with success message
$this->createEntry($data);
return redirect('/dashboard')
->with('success', "Data successfully submitted");
}
我尝试过通过XMLHttpRequest提交数据，但表单数据和会话数据似乎没有包含在请求响应中的任何位置。
function submit() {
var formData = $('#form').serializeArray();
formData.push({ name: "additional_data", value: additional_data });
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == XMLHttpRequest.DONE) {
// window redirects, but form data and session data are lost
window.location.replace(request.responseURL);
}
}
request.open("POST", '/submit_form_data');
request.send(formData);
}
如果我通过简单的$("#form"(.submit((提交表单，那么表单数据和会话数据都会原封不动地传输，然而，在使用此方法时，似乎没有任何方法可以附加表单数据，因此我的"#form；additional_ data"；丢失。
还有最后一点。如果我重定向而不等待XMLHttpRequest。完成后，表单和会话数据将被保留。然而，在这种情况下，我不知道我应该重定向到哪个URL。
function submit() {
var formData = $('#form').serializeArray();
formData.push({ name: "additional_data", value: additional_data });
var request = new XMLHttpRequest();
request.open("POST", '/submit_form_data');
request.send(formData);
// session data will be intact, but I don't have a redirect URL
window.location.replace('/dashboard');
}
更新：
使用hppycoder的建议，我找到了一个可行的解决方案。
问题是需要通过PHP设置前端所需的值。这包括$errors变量，该变量通过重定向((设置->withErrors($validator(，以及通过重定向((设置的表单输入数据->使用Input((。
但是，我需要能够在JavaScript中读取php响应。如果我返回一个response((->json((对象，但随后将不会设置$errors和表单输入数据。
解决方法是将这两种方法结合起来，尽管感觉不太优雅，因为这需要我对POST方法进行多次调用。
Laravel提交路线
public function submitData(Request $request) {
$data = $request->all();
// check for form error and redirect back with error message and form input
$validator = Validator::make($data);
if ($validator->fails()) {
// this will set the necessary php values ($errors variable and form input data)
// response cannot be read by ajax
return redirect()
->back()
->withErrors($validator)
->withInput();
}
// no form errors, submit data and return 'success' response
$this->createEntry($data);
// this response can be read by ajax, and the Session 'success' value is set
Session::put('success', ("Data successfully submitted"));
return response()->json([
'success' => true
]);
}
JavaScript提交功能
function submit() {
var formData = $('#form').serializeArray();
formData.push({ name: "additional_data", value: additional_data });
$.ajax({
type: "POST",
url: "/submit_form_data",
data: formData,
success: function(data) {
if (data.success) {
// check for 'success' and redirect to dashboard
window.location.replace("/dashboard");
} else {
// if no success message, reload current page with form errors and data
// if I call window.location.reload() here, the form data and $errors variable are not set
// in order to set these I need to submit the data a second time via XMLHttpRequest
var form = document.getElementById('form');
var formData = new FormData(form);
formData.push({ name: "additional_data", value: additional_data });
var request = new XMLHttpRequest();
request.open("POST", '/submit_form_data');
request.send(formData);
// now after reload, the form data and $errors varaible will be set
window.location.reload();
}
}
});
}
此外，下面是我的html，它显示了php值是如何由blade模板呈现的。我应该在最初的帖子中包含这一点，以澄清为什么我需要设置php值。
<body>
@if (count($errors->all()) > 0)
<div class="alert alert-danger alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Error</h4>
Please check the form below for errors
</div>
@endif
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Success</h4>
{{ $message }}
</div>
@endif
<form id="form" class="form-horizontal" role="form" method="POST" enctype="multipart/form-data">
<div class="row form-group">
<label class="control-label">Some Data</label>
<input class="form-control" name="some_data" value="{{ old('some_data') }}">
</div>
<div class="row">
@if ($errors->has('some_data'))
<span class="help-block">
<strong>{{ $errors->first('some_data') }}</strong>
</span>
@endif
</div>
</form>
</body>
我将使用我之前发布的文档来展示。
public function submitData(Request $request) {
$data = $request->all();
// check for form error and redirect back with error message and form input
$validator = Validator::make($data);
if ($validator->fails()) {
return redirect()
->back()
->withErrors($validator)
->withInput();
}
// submit data and redirect with success message
$this->createEntry($data);
return response()->json([
'success' => true,
'message' => 'Data successfully submitted',
]);
}
JS提交：
function submit() {
var formData = $('#form').serializeArray();
formData.push({ name: "additional_data", value: additional_data });
$.ajax({
type: "POST",
url: "/submit_form_data",
data: formData,
success: function(data) {
console.log(data);
// response includes redirect url, session data ('success' or 'error' + message), form data (if form error)
}
});
}