jquery Ajax Doesn't Send JSON Data

Question

I am trying to send an ajax send request, but it always goes into 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;
});

This always shows alert('inside error: ' + err.message);in error.I also tried data: JSON.stringify(data)and it didn't work either. Is there a problem with datavariable? Where is the problem?

Network tab:

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

backend post

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

What is the error ? Check the response of the ajax call also — Shyju
– Shyju, Commented Oct 22, 2016 at 23:53
Hard to say, request looks ok. Go to the developer tools in your browser and check in the Network tab if you pass the data along with your request. And check what the backend returns because if the error function triggers, that means the backend returns something other than 200. — Chris Dąbrowski
– Chris Dąbrowski, Commented Oct 22, 2016 at 23:54
You put url: "/", are you sure this is the page you want to call? — user2345
– user2345, Commented Oct 22, 2016 at 23:56
@KrzysztofDąbrowski I have just checked the status and it was 200. Message was also sent, but ajax still shows error alert. — Munchmallow
– Munchmallow, Commented Oct 23, 2016 at 0:00

Munchmallow · Accepted Answer · 2016-10-23 00:56:57Z

1

I have removed dataType: 'json'and contentType: "application/json"and ajax request succeeded. I still don't know why but it worked after removing them.

answered Oct 23, 2016 at 0:56

Munchmallow

3111 gold badge4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sideroxylon Over a year ago

The response is not JSON. See other answer. Also HERE

sideroxylon · Accepted Answer · 2016-10-23 00:09:00Z

0

dataType refers to the expected response from the server - see HERE. If the response is not JSON, remove dataType: 'json' from the ajax function, and jQuery will make an intelligent guess.

answered Oct 23, 2016 at 0:09

sideroxylon

4,4261 gold badge25 silver badges42 bronze badges

1 Comment

user2345 Over a year ago

See: jsfiddle.net/ema79prk/1 is working. Change dataType: 'json' to dataType: 'xml' and you'll get a parseerror

Enix · Accepted Answer · 2016-10-23 01:28:06Z

The ajax client expects your response MIME type as 'json', however you provided a plain text 'okay' as response.

If you still need to send json as a response, you can make use of res.type change your backend like this:

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"});
});

Then your frontend should work as expected. For most of the case, you don't need to specify dataType, because ajax could determine the mime type automatically base on your server response.

Collectives™ on Stack Overflow

jquery Ajax Doesn't Send JSON Data

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related