作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在创建一个投票应用程序,但我遇到了一个不知道如何解决的问题。我认为我的应用程序结构很糟糕。我有一个像这样的 POST 路由
app.route('/poll-create')
.post(function(req, res) {
var userID; //variable to store the authentication id for the user
var incoming_id = Object.keys(req.body)[0];
console.log(incoming_id);
serverHandler.newPoll(req, res, db, function(id) {
user_id = id;
});
res.redirect('/new-poll');
});
我正在将一些表单数据从 HTML 传递到此路由
<form action='' method='post' enctype='multipart/form-data' name='new-poll-form'>
<div class='form-group'>
<label>Title</label>
<input type='text' name='title' class='form-control' placeholder='Title' />
</div>
<div class='form-group'>
<label>Options</label>
<textarea class="form-control poll-options" rows="5" placeholder='Options' name='options'></textarea>
</div>
<button type='submit' class='btn btn-primary submit-butt'>Submit</button>
</form>
表单中输入的数据将直接发送到路由,无需我进行 AJAX 请求。我认为这是因为我在表单中设置了 method='post' 。
现在,我的问题是我还需要从链接到上述 HTML 文件的 JavaScript 文件中传递一个对象。我通过像这样的 AJAX 调用来做到这一点
$('.submit-butt').on('click', function() {
console.log('From in here');
ajaxFunctions.ready(ajaxFunctions.ajaxRequest('POST', appUrl + '/poll-create', response.authResponse.userID, function(data) {
}));
});
下面是AJAX函数
'use strict';
var appUrl = window.location.origin;
var ajaxFunctions = {
ready: function ready (fn) {
if (typeof fn !== 'function') {
return;
}
if (document.readyState === 'complete') {
return fn();
}
document.addEventListener('DOMContentLoaded', fn, false);
},
ajaxRequest: function ajaxRequest (method, url, data, callback) {
var xmlhttp = new XMLHttpRequest();
console.log('Inside ajaxRequest');
console.log(data);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
callback(xmlhttp.response);
}
};
xmlhttp.open(method, url, true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send(data);
}
};
所以,我面临的第一个问题是,当我尝试 console.log 通过 AJAX 请求发送的数据(假设我发送一个对象)时,我得到的输出是 {'object Object': ' '}。这就是为什么我选择仅发送该对象的用户 ID。在这种情况下,我得到这个,{'userID': ' '}。这很烦人,但我至少可以使用它。
我的第二个问题是,即使我解决了第一个问题,我本质上还是对同一个路由进行了两次 AJAX 调用。因此,我无法同时访问表单数据和用户 ID。因此,我无法将它们插入到单个文档中。我该如何解决这个问题?有没有比我现在所做的更好的传递数据的方法?请帮忙!我正在使用 body-parser 来解析传入的数据,并使用强大的解析器来解析传入的表单数据。
最佳答案
您应该只提出一个如下请求:
$('.submit-butt').on('click', function() {
var formData = {}; // Prepare form data.
// Add code to get form data as json and insert it in formData
// You can either use Javascript for this or, with jQuery you can look into https://api.jquery.com/serializeArray/.
formData.userId = response.authResponse.userID; // This is how you add new data.
// Make ajax request with formData.
return false; // It is important to return false so the normal form POST request will not trigger, since you already did all that job with Ajax.
});
关于javascript - 同时向同一路由发出两个不同的 POST 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39748952/
我是一名优秀的程序员,十分优秀!