jQuery的Ajax不发送JSON数据
我试图发送一个ajax发送请求，但它总是error 。
$('form#contactForm button.submit').click(function () {
var contactName = $('#contactForm #contactName').val();
var contactEmail = $('#contactForm #contactEmail').val();
var contactSubject = $('#contactForm #contactSubject').val();
var contactMessage = $('#contactForm #contactMessage').val();
var data = {
'contactName': contactName,
'contactEmail': contactEmail,
'contactSubject': contactSubject,
'contactMessage': contactMessage
};
$.ajax({
type: "POST",
url: "/",
data: data,
dataType: 'json',
contentType: "application/json",
success: function (msg) {
alert('success message: ' + msg);
if (msg == 'OK') {
$('#image-loader').fadeOut();
$('#message-warning').hide();
$('#contactForm').fadeOut();
$('#message-success').fadeIn();
$('#contactForm button.submit').prop('disabled', true);
}
else {
$('#image-loader').fadeOut();
$('#message-warning').html(msg);
$('#message-warning').fadeIn();
}
},
error: function (err) {
if (contactName.length === 0 || contactEmail.length === 0 || contactSubject.length === 0 ||
contactMessage.length === 0) {
$('#message-warning').html('Please check form once again.');
$('#message-warning').fadeIn();
event.preventDefault();
}
alert('inside error: ' + err.message);
}
});
return false;
});
这总是显示alert('inside error: ' + err.message); 在error 。我也试过data: JSON.stringify(data) ，它也没有工作。 data变量有问题吗？ 哪里有问题？
网络标签：
Request URL:http://localhost:3000/
Request Method:POST
Status Code:400 Bad Request
Remote Address:[::1]:3000
Response Headers
view source
Connection:keep-alive
Content-Length:24
Content-Type:text/html; charset=utf-8
Date:Sun, 23 Oct 2016 00:12:43 GMT
ETag:W/"18-9LwX+BuZqYnTTqGm6GcNuA"
X-Powered-By:Express
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:102
Content-Type:application/json
Host:localhost:3000
Origin:http://localhost:3000
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
contactName=My+Name&contactEmail=email%40email.com&contactSubject=My+Subject&contactMessage=My+Message
后端帖子
router.post('/', function (req, res) {
if (typeof req.body.contactName === 'undefined' || typeof req.body.contactEmail === 'undefined' ||
typeof req.body.contactSubject === 'undefined' || typeof req.body.contactMessage === 'undefined' ||
!validator.isEmail(req.body.contactEmail)) {
return res.status(400).send('error');
}
mail.sendMail(req.body.contactName, req.body.contactEmail, req.body.contactSubject, req.body.contactMessage);
return res.status(200).send('okay');
});
dataType指的是来自服务器的预期响应 - 请参阅这里。 如果响应不是JSON，请从ajax函数中删除dataType: 'json' ，并且jQuery将进行智能猜测。
我删除了dataType: 'json'和contentType: "application/json"并且ajax请求成功。 我仍然不知道为什么，但删除它们后仍然有效。
ajax客户端期望您的响应MIME类型为'json'，但是您提供了纯文本'okay'作为响应。
如果你仍然需要发送json作为回应，你可以使用res.type像这样改变你的后端：
router.post('/', function (req, res) {
if (typeof req.body.contactName === 'undefined' || typeof req.body.contactEmail === 'undefined' ||
typeof req.body.contactSubject === 'undefined' || typeof req.body.contactMessage === 'undefined' ||
!validator.isEmail(req.body.contactEmail)) {
return res.status(400).type('json').send({"result": "error"});
}
mail.sendMail(req.body.contactName, req.body.contactEmail, req.body.contactSubject, req.body.contactMessage);
return res.status(200).type('json').send({"result":"okay"});
});
那么你的前端应该按预期工作。 对于大多数情况，您不需要指定dataType ，因为Ajax可以根据您的服务器响应自动确定MIME类型。