我正在用 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>
每个按钮都会发布一个 Action ,但是,每次用户单击该按钮时它都会刷新页面。我在另一篇文章中读到,这可以通过 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'
是否接受实际的 jade 文件。例如,dogshow.jade
?
很抱歉提出问题,我对此很陌生,仍在摸索。
最佳答案
不,这行不通。如果你想发送所有表单数据作为你在表单中分配的名称,只需使用单行。
var data = $('#upload').serialize();
关于javascript - 如何在 Express JS 中使用 POST 在不刷新页面的情况下在一个页面中提交多个表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38548310/