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

Javascript 如何在Express JS中使用POST在一个页面中提交多个表单而不刷新页面,javascript,jquery,html,ajax,express,Javascript,Jquery,Html,Ajax,Express,我正在用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">LI

我正在用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>
上面的代码行吗?还有,
url:'http://localhost/my/url“
接收实际的jade文件。例如,
dogshow.jade


很抱歉提出这些问题,我对这一点还很陌生,现在还在摸索中。

不应该
$('upload')
$('upload')
?在jQuery中,id前面有
#
符号。

不,这不起作用。如果您想将所有表单数据作为表单中指定的u名称发送,只需使用单行即可

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

你是说我可以将所有4个表单分配给一个表单id,并使用var data=$(“#upload”).serialize();?但是你只给一个表单分配了上传Id。你是说我可以给所有表单分配上传Id,并将我的var数据更改为var data=$('#upload')。serialize();我已经将代码更新为$(#upload),但是我可以对所有4个表单使用相同的上传ID吗?HTML元素ID对于DOM应该是唯一的。如果您需要相同的属性,那么在jQuery中使用类和类可以与类名称前面的点(.)一起使用。是的,我刚刚这样做了--几分钟前我正在阅读有关它的内容。对于$.ajax({url:'',这是页面还是页面的url?例如,dog.jade vs
 $('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)
var data = $('#upload').serialize();