jquery Ajax не отправляет данные JSON

Question

Я пытаюсь отправить запрос на отправку 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'); 
}); 

Answer 1

dataType относится к ожидаемому ответа от сервера - см HERE. Если ответ не JSON, удалите dataType: 'json' из функции ajax, и jQuery сделает разумное предположение.

Answer 2

Я удалил dataType: 'json' и contentType: "application/json" и запрос ajax преуспел. Я все еще не знаю, почему, но это сработало после их удаления.

Answer 3

Клиент 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 для ответа сервера.