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

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() 提交表单，则表单数据和会话数据都将原封不动地传输，但是，使用此方法时似乎没有任何方法可以附加表单数据并且所以我的“附加数据”丢失了。

最后一点。如果我在不等待 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 设置。这包括通过redirect()->withErrors($validator) 设置的$errors 变量，以及通过redirect()->withInput() 设置的表单输入数据。

但是，我需要能够在我的 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 值。我应该将其包含在原始帖子中，以阐明为什么需要设置 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>

标签： javascriptphpajaxlaravel

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

问题描述

解决方案

推荐阅读