Javascript 发送序列化表单数据并接收带有表单和会话数据的PHP Laravel重定向

我的页面上有一张表格。提交后，我将在表格中添加其他数据以供提交。我可以通过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)
        }
    });
}

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

拉威尔数据提交路线

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（）提交表单，表单数据和会话数据都会完整地传输，但是，在使用此方法时，似乎没有任何附加表单数据的方法，因此我的“附加#u数据”会丢失

还有最后一点。如果在不等待XMLHttpRequest.DONE的情况下重定向，则表单和会话数据将被保留。但是，在这种情况下，我不知道应该重定向到哪个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变量（通过redirect（）->withErrors（$validator）设置）和表单输入数据（通过redirect（）->withInput（）设置）

但是，我需要能够在JavaScript中读取php响应。如果返回response（）->json（）对象，则可以执行此操作，但不会设置$errors和表单输入数据

解决方法是将这两种方法结合起来，尽管感觉不那么优雅，因为它需要我对POST方法进行多次调用

拉威尔提交路线

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) {
            // response includes redirect url, session data ('success' or 'error' + message), form data (if form error)
        }
    });
}

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值。我应该在最初的帖子中包含这一点，以澄清我为什么需要设置php值

<body>

    @if (count($errors->all()) > 0)
        <div class="alert alert-danger alert-block">
            <button type="button" class="close" data-dismiss="alert">&times;</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">&times;</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>

@如果（计数（$errors->all（））>0）
&时代；
错误
请检查下表中的错误
@恩迪夫
@如果（$message=Session:：get（'success'））
&时代；
成功
{{$message}}
@恩迪夫
一些数据
@如果（$errors->has（'some_data'））
{{$errors->first（'some_data'）}
@恩迪夫

我将使用前面发布的文档来展示

公共函数提交数据（请求$Request）{
$data=$request->all（）；
//检查表单错误，并使用错误消息和表单输入重定向回
$validator=validator:：make（$data）；
如果（$validator->fails（））{
返回重定向（）
->back（）
->威瑟罗（$validator）
->withInput（）；
}
//提交数据并重定向成功消息
$this->createEntry（$data）；
返回响应（）->json([
“成功”=>正确，
'消息'=>'数据已成功提交'，
]);
}

JS提交：

函数提交（）{
var formData=$（'#form'）.serializeArray（）；
push（{name:“additional_data”，value:additional_data}）；
$.ajax({
类型：“POST”，
url:“/submit\u form\u data”，
数据：formData，
成功：功能（数据）{
控制台日志（数据）；
//响应包括重定向url、会话数据（“成功”或“错误”+消息）、表单数据（如果表单错误）
}
});
}

您正在告诉Laravel返回一个

重定向（'/dashboard'）

，它将浏览器重定向到仪表板。您想要做的是让另一个端点返回JSON。这就是为什么你有一个重定向URL和一个成功message@hppycoder我认为这对我来说是有道理的。但是，应该使用哪种提交方法，ajax还是XMLHttpRequest，这无关紧要？请求可以使用jQuery或XMLHttpRequest，最重要的是Laravel响应。文档应该能帮助你解决这个问题，这让我非常接近我需要的位置。我可以使用Session:：put（'success'，$msg）设置会话变量。但是，redirect（）->withErrors（$validator）->withInput（）还会将$errors变量与表单输入数据一起传递回我的视图。知道如何使用json响应来解决这个问题吗？如果希望在AJAX中处理输出，就不应该重定向。这就是我在这里要说的，错误可以在JSON输出中传递并在Javascript中显示。只是澄清一下，成功消息和错误都是由视图呈现的，这就是我试图设置它们的原因。我听到了您对重定向的看法。我只是指出，当我使用response（）vs redirect（）时，我的视图中缺少了某些东西。如果我没有把事情说清楚，我很抱歉。我知道我可以得到JSON格式的错误，但由于我的刀片模板已经呈现了PHP变量，我希望有一种方法可以继续将它们作为PHP而不是JS传递。