PHP 使用 Slim 从 Actions 处理 Ajax

Question

我有一个关于使用 slim 框架的 php 和 ajax 的问题

我创建了一些将我路由到控制器的路由，现在我想使用 Ajax 提交一个简单的表单。这工作正常，但问题是如果我将在没有 Ajax 的情况下提交表单，我会向服务器发送一个 post 请求，这将调用 createAction 而不是我的控制器中的表单 renderAction 方法（参见代码）。 但是我需要调用 formRender，因为当表单无效时，我必须再次向用户显示带有值的表单。

注意：我还没有实现任何验证代码。

这里是我提交表单的 JS 代码：

 $('#reservation').on('submit', function (ev) {
        ev.preventDefault();
        var data = $(this).serialize();
        var keyVal = data.split("&");
        var values = [];
        keyVal.forEach(function (element) {
            values[element.split("=")[0]] = element.split("=")[1];
        });
        $.post("/admin/reservation/create", data).done(function (data) {
            console.log(data);
        }).error(function (err) {

        });
    });

这里是我的控制器的代码：

 public function formRender(Request $request, Response $response)
{
    $formData = $request->getParams();
    return $this->view->render($response, '/reservations/form.twig', [
        'formData' => $formData]);
}


public function createAction(Request $request, Response $response)
{
    $formData = $request->getParams();
    $response = $response->withJson($formData);
    return $response;
}

这是我的路线：

    $app->get('/reservation/create', 'ReservationController:formRender');
    $app->post('/reservation/create', 'ReservationController:createAction');

这里是查看代码（使用树枝）：

 <form class="col s6" id="reservation" method="post">
        <div class="row">
            <div class="input-field col s6">
                <input placeholder="Titel" id="title" name="title" type="text" class="validate"
                       value="{{ formData.title }}">
                <label for="title">Titel</label>
            </div>
            <div class="input-field col s12 m6">
                <select class="icons" multiple>
                    <option value="" disabled selected>Choose Rooms</option>
                    <option value="" data-icon="images/sample-1.jpg" class="circle">example 1</option>
                    <option value="" data-icon="images/office.jpg" class="circle">example 2</option>
                    <option value="" data-icon="images/yuna.jpg" class="circle">example 1</option>
                </select>
                <label>Rooms</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s6">
                <input value="{{ formData.startDate }}" id="startDate" name="startDate" type="date" class="validate">
            </div>
            <div class="input-field col s6">
                <input value="{{ formData.endDate }}" id="endDate" name="endDate" type="date" class="validate">
            </div>
        </div>

        <button type="submit" class="waves-effect waves-light btn">button</button>
    </form>

我应该如何解决这个问题......所以我希望能够通过 ajax 发送数据，并且我希望能够在没有 js 的情况下提交我的表单。我正在寻找一个干净的解决方案..不是一个快速而肮脏的解决方案，带有隐藏的字段或其他东西...... 这种情况的最佳做法是什么？

Answer 1

我建议你解决它命名你的路线：

$app->get('/reservation/create', 'ReservationController:formRender')->setName('reservationFormRenderer');
$app->post('/reservation/create', 'ReservationController:createAction')->setName('reservationFormAjaxProcessor');

由于您使用 Twig 作为模板引擎，请使用 path_for 方法将 rotes 注入表单：

<form class="col s6" id="reservation" method="post" action="{{ path_for('reservationFormRenderer') }}" data-ajax-processor="{{ path_for('reservationFormAjaxProcessor') }}">

剩下要做的就是在你的 JS 代码中选择动态路由：

$('#reservation').on('submit', function (ev) {
    ev.preventDefault();
    var data = $(this).serialize();
    var keyVal = data.split("&");
    var values = [];
    keyVal.forEach(function (element) {
        values[element.split("=")[0]] = element.split("=")[1];
    });
    // here we pass the value of data-ajax-processor attribute of the form
    $.post(($this).data('ajax-processor'), data).done(function (data) {
        console.log(data);
    }).error(function (err) {

    });
});

现在如果表单不是动态提交的（即 AJAX 方式），处理器的 URL 将在表单的 action 属性中。

您实际上可以在不命名路由的情况下执行此操作，但这种方式将保持代码的可维护性，因为您只需在一个地方更改实际 URL - 即在路由声明中。