PHPはスリム

Question

とアクションからのAjaxを扱う私は、コントローラへのルート私は今、私はアヤックスとの簡単なフォームを送信したいいくつかのルートを作成したスリムなフレームワーク

とPHPとAjaxについての質問を得ました。これはうまくいきますが、Ajaxを使わないでフォームを送信すると問題が発生します。私はコントローラのフォームrenderActionメソッドの代わりにcreateActionメソッドを呼び出します（コード参照）。 しかし、formRenderを呼び出す必要があります。これは、フォームが有効でない場合、フォームをユーザーに再度表示する必要があるためです。

注：検証コードはまだ実装されていません。

$('#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) { 

     }); 
    }); 

とここに私のコントローラのコード：ここ

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

ビューコード：

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

ここ

私のルートここ

私のJSコードは、フォームを送信します（小枝を使用）：

<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なしでフォームを送信できるようにしたいと考えています。私はきれいな解決策を探しています..隠されたフィールドや何かで迅速かつ汚れた修正ではありません... そのような場合のベストプラクティスは何ですか？ 、あなたはテンプレートエンジンとしての小枝を使用しているので

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

フォームにローテスを注入するpath_forメソッドを使用します：

Answer 1

は、私はあなたがそれはあなたのルートを命名解決示唆

<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-way）、プロセッサのURLはフォームのアクション属性になります。

ルートの名前を付けずに実際にこれを実行できますが、ルート宣言にある実際のURLを変更するだけで済みますので、この方法はコードの保守性を維持します。