AJAX请求正文为空（无jQuery）

Question

我正在尝试不使用jQuery来解决此问题，以便可以更好地了解事物的工作方式。

我正在将AJAX请求发送到带有JSON对象的节点服务器。 服务器可以接收请求并做出响应，但请求正文始终为空。 我尝试将请求标头设置为“ application / json”，但由于某种原因，这会将表单提交更改为将参数发布到URL，而不是使用Javascript函数。 如果有人能告诉我为什么也会发生这种情况，将不胜感激。

形成

<form onsubmit="sendEmail(); return false;">
  <input type="text" name="fromEmail">
  <input type="text" name="subject">
  <textarea name="message" rows="14"></textarea>
  <input type="submit" value="SEND">
</form>

电邮功能

function sendEmail() {

  var emailContent = JSON.stringify( 
    {
      email: $('input[name=fromEmail]').val(),
      subject: $('input[name=subject]').val(),
      message: $('textarea[name=message]').val()
    }
  );

  var httpRequest;
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
  } else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }

  httpRequest.open('POST','/message', true);
  httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
      alert(httpRequest.responseText);
    }
  }

  httpRequest.send(emailContent);
}

节点JS路由

var express = require('express');
var bodyParser = require('body-parser');
var app = express();

// set body parser
app.use(bodyParser.json());

// Process email form
app.post('/message', function(req,res) {
  console.log('Request received by email path.');  
  console.log(req.body);
  res.send('{"success": true}')
  console.log('Response sent.')
});

Answer 1

如果尝试发送json响应，则需要将响应的内容类型设置为json。

 res.setHeader('Content-Type', 'application/json');

Answer 2

您可以尝试以下方法：

httpRequest.open('POST','/message', true);
httpRequest.setRequestHeader("Content-Type","application/json");
httpRequest.send(emailContent);

参考： http : //www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

Answer 3

我想我了解您的问题，您需要在不执行回发的情况下调用sendEmail（）函数。 好吧，为此，您将需要一个常规的html按钮而不是表单提交。 表单用于执行服务器对特定URL的请求并生成另一个回发。

您有两种选择：

1）使用按钮和ajax请求（XMLHttpRequest）进行客户端调用：

<input type="text" name="fromEmail">
<input type="text" name="subject">
<textarea name="message" rows="14"></textarea>
<input type="submit" value="SEND">
<button type="button" onclick="sendEmail()">Send</button>

2）使用表单提交并直接通过该表单致电服务。 参数将从表格中获取，并在请求中发送：

<form action="/message" method="post">
  <input type="text" name="fromEmail">
  <input type="text" name="subject">
  <textarea name="message" rows="14"></textarea>
  <input type="submit" value="SEND">
</form>

然后在服务器端，您可以使用为字段指定的名称访问数据：

fromEmail = req["fromEmail"]