如何使用POST在一個頁面中提交多個表單而無需在Express中刷新頁面JS

我正在ExpressJS中開發應用程序，並計劃在一個jade文件中包含以下HTML代碼。如何使用POST在一個頁面中提交多個表單而無需在Express中刷新頁面JS

我有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？

對不起，我對此很感興趣，並且仍然感覺我的方式。

來源

2016-07-24 ShaunK

不，這不行。如果你想發送所有的表單數據，只需使用單行，就可以在表單中分配。

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

來源

2016-07-24 03:40:39

你是說我可以指定所有4種形式單一形式ID，並使用VAR數據= $（「＃上傳」）。序列化（）;? – ShaunK

但你已指定上傳ID只有一種形式。 –

是你說我可以將上傳ID分配給所有表單，並將我的var數據更改爲var data = $（'＃upload'）。serialize（）;它會起作用嗎？ – ShaunK

不應該$('upload')是$('#upload')？在jQuery ID的前面加上#符號。

來源

2016-07-24 03:27:39 AnirudhM

我已經更新了我的代碼到$（＃上傳），但是我可以爲所有4個表單使用相同的上傳ID嗎？ – ShaunK

對於DOM，HTML元素ID應該是唯一的。如果您需要相同的屬性使用類，並且在jQuery中可以使用類名稱前面的點（。）。 – AnirudhM

是的，我只是這麼做的 - 幾分鐘前就讀到了。 – ShaunK

如何使用POST在一個頁面中提交多個表單而無需在Express中刷新頁面JS

回答

相關問題