Express JSでページを更新せずにPOSTを使用して1つのページに複数のフォームを提出する方法

Question

私はExpressJSでアプリケーションを開発しており、ヒスイファイルに次のHTMLコードを入れる予定です。私は4つのフォームのボタンを使って、次のページ持って

：

<div class="dog">   
     <div class="dog_wrapper clearfix"> 
     <div class="col-lg-6 col-md-6 col-sm-6 left_sec"> 
     <div class="panel-heading">LIVE</div> 
     <div class="col-md-6 col-sm-6"> 
     <div class="livefeed-left"> 
     <form class="button" method="post"> 
      <input type="hidden" value="DEPLOY" id="fieldID" name="fieldName"/> 
      <input type="submit" value="Raise"/> 
     </form> 
     </div> 
     </div> 
     <div class="col-md-6 col-sm-6"> 
     <div class="livefeed-right"> 
     <form class ="button" method="post"> 
      <input type="hidden" value="RECOVER" id="fieldID" name="fieldName"/> 
      <input type="submit" value="Lower"/> 
     </form> 
     </div> 
     </div> 
     </div> 

    <div class="col-lg-6 col-md-6 col-sm-6 right_sec"> 
    <div class="panel-heading" id="sample" style="width: 100%; height:500px">MAP</div> 
    <div class="col-md-6 col-sm-6"> 
    <div class="livefeed-left"> 
     <form class= "button" action="" method="post"> 
     <input type="hidden" value="UPLOAD" id="fieldID" name="fieldName"/> 
     <input type="hidden" value="" id="lngHolderID" name="lngHolderName"/> 
     <input type="hidden" value="" id="latHolderID" name="latHolderName"/> 
     <input type="hidden" value="" id="altHolderID" name="altHolderName"/> 
     <input type="hidden" value="" id="actHolderID" name="actHolderName"/> 
     <input type="hidden" value="" id="actParamHolderID" name="actParamHolderName"/> 
     <input type="submit" value="Upload" onclick="compileHolder()"/> 
    </form> 
</div> 

各ボタンがアクションを掲載する予定が、しかし、それはページに、ユーザーがボタンをクリックするたびに更新されます。私はこれをjQUERYまたはAJAXで制御できるという別の記事を読んでいます。

私は、タグの前に最後に次のスクリプトを追加しました：

<script type="text/javascript"> 
    $('.button').on('submit', function (event) { 
    event.preventDefault(); // Stop the form from causing a page refresh. 
    var data = { 
     username: $('#username').val(), 
     password: $('#password').val() 
    }; 
    $.ajax({ 
     url: 'http://localhost/my/url', 
     data: data, 
     method: 'POST' 
    }).then(function (response) { 
     // Do stuff with the response, like add it to the page dynamically. 
     $('body').append(response); 
    }).catch(function (err) { 
     console.error(err); 
    }); 
    }); 
</script> 
</body> 

</html> 

を私の質問は、次のセクションのためである：

$('upload').on('submit', function (event) { 
event.preventDefault(); // Stop the form from causing a page refresh. 
var data = { 
    username: $('#username').val(), 
    password: $('#password').val() 
}; 
$.ajax({ 
    url: 'http://localhost/my/url', 
    data: data, 
    method: 'POST' 
}).then(function (response) 

ます上記のコードで動作しますか？また、url: 'http://localhost/my/url'は実際の翡翠ファイルを取り込みますか？たとえば、dogshow.jade？

ご質問申し訳ありませんが、私はこれでかなり新しく、まだ自分の周りを感じています。

Answer 1

これは機能しません。あなたがフォームに割り当てられたuの名前としてすべてのフォームデータを送信したい場合は、単一行を使用します。

var data = $('#upload').serialize(); 

Answer 2

$('upload')は$('#upload')である必要がありますか？ jQueryのIDの前には、#という記号が付いています。