AJAX 请求正文为空(无 jQuery)
Posted
技术标签:
【中文标题】AJAX 请求正文为空(无 jQuery)【英文标题】:AJAX Request Body Empty (No jQuery) 【发布时间】:2015-11-12 03:55:29 【问题描述】:我试图在不使用 jQuery 的情况下解决这个问题,以便更好地了解事情的工作原理。
我正在使用 JSON 对象向节点服务器发送 AJAX 请求。服务器可以接收请求并响应,但请求正文始终为空。我尝试将请求标头设置为“application/json”,但由于某种原因,这会将表单提交更改为将参数 POST 到 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.')
);
【问题讨论】:
在浏览器上打开开发者工具,检查是否有任何控制台错误,如果正在发送请求,请检查网络选项卡。 【参考方案1】:如果您尝试发送json响应,则需要将响应的内容类型设置为json。
res.setHeader('Content-Type', 'application/json');
【讨论】:
【参考方案2】:你可以试试这个:
httpRequest.open('POST','/message', true);
httpRequest.setRequestHeader("Content-Type","application/json");
httpRequest.send(emailContent);
参考: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
【讨论】:
【参考方案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"]
【讨论】:
我认为这是我的问题。该表单是通过 URL 编码提交的,而不是使用 sendEmail() 函数。这与设置内容类型一起修复了它。以上是关于AJAX 请求正文为空(无 jQuery)的主要内容,如果未能解决你的问题,请参考以下文章
AJAX Post 请求错误:“不能为空”,[验证::required] 在 POST 正文中发送 JSON 对象时
javascript jquery Ajax在请求正文或查询参数中发送数据