Javascript 同时向同一路由发出两个不同的POST请求

Javascript 同时向同一路由发出两个不同的POST请求,javascript,jquery,ajax,node.js,express,Javascript,Jquery,Ajax,Node.js,Express,我正在创建一个投票应用程序,我有一个问题,我不知道如何解决。我想我的应用程序结构不好。我有一条这样的邮路 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];

我正在创建一个投票应用程序,我有一个问题,我不知道如何解决。我想我的应用程序结构不好。我有一条这样的邮路

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函数

'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':'''}。这就是为什么我选择只发送来自该对象的userID。在这种情况下,我得到这个,{'userID':'''}。这很烦人,但至少我能应付

我的第二个问题是,即使我按照第一个问题的方式工作,我基本上还是在对同一条路线进行两个AJAX调用。因此,我不能同时访问表单数据和用户ID。因此,我无法将它们插入到单个文档中。我该如何解决这个问题?有没有比我现在做的更好的数据传递方式?请帮忙!
我使用body解析器解析传入数据,并使用body解析器解析传入表单数据

最简单的方法可能是立即发送所有信息(除了您不清楚的ID)。您可以使用表单或AJAX来实现这一点。您可以使用jquery之类的工具来收集表单数据,甚至只需一个简单的函数就可以在将数据作为JSON发送之前将其从表单中取出。

最简单的方法可能是一次发送所有数据(除了您不清楚的ID)。您可以使用表单或AJAX来实现这一点。您可以使用jquery之类的工具来收集表单数据,甚至只需一个简单的函数就可以在将数据作为JSON发送之前将其从表单中提取出来。

您应该只发出一个这样的请求:

$('.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.
});

您应该只提出一个这样的请求:

$('.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.
});


对于第一个问题,使用console.log(JSON.stringify(object))将对象转换为可读的JSON?这取决于第一个电话吗?@vlatkokaplan-那不行。当我尝试这样做时,它返回{“object object”:“},这是与我之前处理的问题完全相同的JSON表示形式。@mimarcel-So,response.authResponse是我从Facebook JavaScript SDK返回的对象。不,这不取决于另一个电话。对于第一个问题,使用console.log(JSON.stringify(object))将对象转换为可读的JSON。从哪里获得response.authResponse.userId?这取决于第一个电话吗?@vlatkokaplan-那不行。当我尝试这样做时,它返回{“object object”:“},这是与我之前处理的问题完全相同的JSON表示形式。@mimarcel-So,response.authResponse是我从Facebook JavaScript SDK返回的对象。不,这不取决于另一个电话。这是独立的,对,这就是我的问题。我必须为ID进行第二次AJAX调用,对吗?那会破坏我自己送所有东西的目的。我仍然需要对ID进行第二次AJAX调用,而我不会在获取表单数据的同时得到它。我只是想也许你可以在记录创建后在服务器上执行第二步。我不确定这是否可行,因为我的Facebook SDK是一个客户端函数,这就是将对象返回到我的服务器的原因。所以,我不知道如何从服务器端直接访问它。对,这就是我的问题。我必须为ID进行第二次AJAX调用,对吗?那会破坏我自己送所有东西的目的。我仍然需要对ID进行第二次AJAX调用,而我不会在获取表单数据的同时得到它。我只是想也许你可以在记录创建后在服务器上执行第二步。我不确定这是否可行,因为我的Facebook SDK是一个客户端函数,这就是将对象返回到我的服务器的原因。所以,我不知道如何从服务器端直接访问它。这听起来似乎可以工作,但我的第二个问题除外,那就是每次我通过AJAX请求传递一个对象,然后我尝试console.log,在路由中,我以{'object object':''的形式获得它当我实施你的解决方案时,同样的事情也会发生。还有一个问题,由于我是通过jquery收集表单数据来手动提交表单数据的,它还会作为多部分数据发送吗?因为如果是,是否可以通过使用主体解析器访问req.body数据?既然body parsers文档提到它不能处理多部分数据?好吧,我试过你的方法,到目前为止它仍然有效。我只需要改变很多微小的函数,让它像以前一样工作。希望不会太糟糕。谢谢你的帮助!很抱歉,我似乎在对您的答案发表评论,但我不明白为什么只有在将数据传递到ajax调用之前,我JSON.string了我的数据,这才起作用。当您将请求头设置为application/json时,一定要这样吗?@ZaidHumayun老实说,我不知道为什么只有当数据字符串化时它才会工作。但如果它有效,那就太好了!:)除了我的第二个问题之外,这听起来似乎是可行的,那就是每次我通过AJAX请求传递一个对象,并且我尝试在路由中使用console.log,我以{'object':''}的形式得到它,当我实现您的解决方案时,同样的事情也会发生。还有一个问题,由于我是通过jquery收集表单数据来手动提交表单数据的,它还会作为多部分数据发送吗?因为如果是,是否可以通过使用主体解析器访问req.body数据?因为身体分析器文档