node.js＆jade - リダイレクトせずにポストリクエストを作成して同じページに結果を表示

Question

ボタンクリックでCRUD操作を実行するnode.js express Webアプリケーションがあります。ここでは、ユーザーからの入力に基づいてレコードを更新する必要があります。このためには、ユーザーから詳細を入力し、レコードの既存の値を同じページに表示し、データを変更するかどうかをユーザーに確認する必要があります。

「はい」の場合は、ユーザーから値を入力して更新する必要があります。私はユーザーからの入力値を取得している単一の翡翠ファイルにこれを入れることは可能ですか？

ヒスイファイル：

extends ../layout 

block content 
    .page-header 
    h3 Updation 

    form.form-horizontal(role='form', method='POST') 
    h4 Enter the employee id for which you want to update the details 
    input(type='hidden', name='_csrf', value=_csrf) 

    .form-group 
     label(class='col-sm-2 control-label', for='empid') Emp ID 
     .col-sm-2 
     input.form-control(type='text', name='empid', id='empid', autofocus=true) 
    .form-group 
     .col-sm-offset-2.col-sm-2 
     button.btn.btn-primary(type='submit') 
      i.fa.fa-pencil 
      | Get details 

私は、ユーザからの従業員IDを取得し、POSTリクエストを作っています。このファイルを持っています。私はどのようにこの同じページ自体への応答を表示し、詳細を変更するように促すかわかりません。

ご協力いただければ幸いです。

Answer 1

はい、これは可能ですが、送信されたフォームではできません。ページがなくなったためです。

代わりに、バックエンドへのAJAXリクエストを行うページにボタンを挿入することができます.AJAXリクエストが戻ったときに、ページの一部を返されたデータで動的に置き換えることができます。もちろん、ユーザーがAJAXリクエストに入力したデータを含めることができます。

このすべてをフロントエンドで実行したいので、これを翡翠で実行することはできません。代わりに、クライアントのブラウザに必要なスクリプトをページに追加する必要があります。ここで

は、これを実現する方法の例です：

ファイルでこれを入れてajax.jade呼ば：今、あなたのページ上の任意の場所にこのミックスインを置くことができ

mixin ajaxFunction 
    script. 
    function changeState(url, buttonid) { 
     $.ajax({url: url}).done(function (data) { 
     $('#' + buttonid).parent().html(data); 
     }); 
    } 

mixin ajaxButton(id, url, buttonLabel) 
    a.btn.btn-primary.btn-xs.btn-block(id='#{id}', 
     href='javascript:changeState(\'#{url}\', \'#{id}\')') #{buttonLabel} 

を。 （ボタンIDはページ全体で一意であり、スペースは含まれていないことを確認してください）。クリックで、それはバックエンドが返さ何で自分自身に置き換えられます：

はそれを行うための一つの方法がある場合はヒスイegineが部分的に、ヒスイのテンプレートをレンダリングできる方法があるかどう

include ajax 

+ajaxButton("myButton", "/some/url", "Klick me!") 

Answer 2

わからない、通常、あなたが使用することができますこれを行うAjax。 Form add submitイベントリスナー。event.preventDefaut（）をデフォルトの送信プロセスを停止するように設定できます。この方法で、ページのリロードを防止できます。