Question

我正在创建一个投票应用程序，我有一个我不知道如何解决的问题。我想我刚刚构建了我的应用程序。我有这样的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);
  }
};

所以，我面临的第一个问题是，当我尝试通过AJAX请求发送的数据时（假设我发送了一个对象），我得到的输出是{'object Object'：''}。这就是我选择仅从该对象发送userID的原因。在那种情况下，我得到了这个，{'userID'：''}。它很烦人，但我至少可以使用它。

我的第二个问题是，即使我绕着第一个问题工作，我实际上是在同一条路线上进行两次AJAX调用。因此，我无法同时访问表单数据和userID。所以，我无法将它们插入到单个文档中。我该如何解决这个问题呢？是否有比我目前更好的传递数据的方法？请帮忙！我使用body-parser来解析传入的数据，并使用强大的来解析传入的表单数据。

Answer 1

最简单的事情可能就是一次性发送所有内容（除了你不明白的ID）。您可以使用表单或AJAX执行此操作。您可以使用类似jquery的东西来收集表单数据，甚至只是一个简单的函数，可以在将数据作为JSON发送之前从表单中提取数据。

Answer 2

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

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

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

2 个答案: