如何使用 POST 在一个页面中提交多个表单而不刷新 Express JS 中的页面

Question

我正在用 ExpressJS 开发一个应用程序，并计划在一个 Jade 文件中包含以下 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

不，这不起作用。如果您想将所有表单数据作为您在表单中分配的名称发送，只需使用单行即可。

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

Answer 2

$('upload') 不应该是$('#upload') 吗？在 jQuery id 前面有 # 符号。