JQuery AJAX: Why is HTTP-code 200 sent and still AJAX request is considered as failed

Question

I have the following code:

 $("button").click(function() { 
      $.ajax({
         url: 'http://***.com:3000/login',
         data: {
            format: 'json',
            username: $('#username').val(),
            password: $('#password').val()
         },
         error: function() {
            console.log("error");
            alert('FAIL');
         },
         dataType: 'jsonp',
         success: function(data) {
            alert('OK');
            console.log("success");
         },
         type: 'GET'
      });


   })

The situation is that once I send a valid username and password and I see that the server code reaches the line:

        res.status(200).send("OK");

the moment the response returns to the client, the code enters the 'error' case.

The console of the browser shows:

Uncaught ReferenceError: OK is not defined

at <anonymous>:1:1

at p (jquery.min.js:2)

at Function.globalEval (jquery.min.js:2)

at text script (jquery.min.js:4)

at Nb (jquery.min.js:4)

at A (jquery.min.js:4)

at XMLHttpRequest.<anonymous> (jquery.min.js:4)

It's really odd because it doesn't point to any place in my code.

The network tab says: It seems like instead of 200 HTTP code, I have 304.

Do you know why and how to fix it?

What shows up for the XHR in the browser console? That should show response headers and content. — Pointy, Jan 30 '17 at 21:07
Most likely something else about the request was invalid. Like the server not returning valid JSONP. (which infact does seem to be the case, "OK" isn't valid jsonp) — Kevin B, Jan 30 '17 at 21:07
Ah, jsonp, OK. Still it'd be useful to see what the Network tab says. — Pointy, Jan 30 '17 at 21:08
As Kevin B says, the simple string "OK" is not what a JSONP response is supposed to look like. It's supposed to look like a JavaScript function call. — Pointy, Jan 30 '17 at 21:27
Why are you using JSONP in the first place, out of curiosity? — Pointy, Jan 30 '17 at 21:29
actually I just copied this piece of code somewhere. Mateen Kadwaikar proposed how to do it with JSON, and I still have problems. — CrazySynthax, Jan 30 '17 at 21:30

score 1 · Answer 1 · answered Jan 30 '17 at 23:20

This is the solution:

$("button").click(function() { 
      $.ajax({
         url: 'http://bank-example.com:3000/login',
         async: false,
         data: JSON.stringify({
            username: $('#username').val(),
            password: $('#password').val()
         }),
         contentType: "application/json",
         Accept: 'application/json; charset=utf-8',
         type: 'POST'
      }).done(function(data) {
         alert('ok');
      }).fail(function(data){
         alert('fail');
      });
   })

Mateen Kadwaikar · Answer 2 · 2017-01-31T07:21:15.893

HTML and Javascript.

    <!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <input type="text" name="author" value="" id="author">
    <input type="text" name="text" value="" id="text">

    <button type="submit" id="button"> Submit </button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script>
        $("#button").click(function() {
            $.ajax({
                type: "POST",
                url: `http://localhost:4730/quote`,
                data: JSON.stringify({
                    author: $('#author').val(),
                    text: $('#text').val()
                }),
                dataType: "json",
                contentType: "application/json",
                Accept: 'application/json; charset=utf-8',
                success: function(data) {
                    console.log(data);
                },
                error: function(err) {
                    console.log(err);
                }
            });
        });
    </script>
</body>

</html>

Node code

 var express = require('express');
    var app = express();
    app.use(express.bodyParser());
    app.use(function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        next();
    });
    var quotes = [{
            author: 'Audrey Hepburn',
            text: "Nothing is impossible, the word itself says 'I'm possible'!"
        },
        {
            author: 'Walt Disney',
            text: "You may not realize it when it happens, but a kick in the teeth may be the best thing in the world for you"
        },
        {
            author: 'Unknown',
            text: "Even the greatest was once a beginner. Don't be afraid to take that first step."
        },
        {
            author: 'Neale Donald Walsch',
            text: "You are afraid to die, and you're afraid to live. What a way to exist."
        }
    ];
    app.get('/', function(req, res) {
        res.json(quotes);
    });

    app.post('/quote', function(req, res) {
        console.log(req.body.author)
        console.log(req.body.text)
        if (!req.body.hasOwnProperty('author') ||
            !req.body.hasOwnProperty('text')) {
            res.statusCode = 400;
            return res.send('Error 400: Post syntax incorrect');
        }

        let newQuote = {
            author: req.body.author,
            text: req.body.text
        }
        quotes.push(newQuote);
        res.json(true);
    })

    app.listen(process.env.PORT || 4730);

But, in this case something is lost in the server. When I turn to req.query.username and req.query.password in the server I get 'undefined' — CrazySynthax, Jan 30 '17 at 21:21
@CrazySynthax what are you using php , .net or something else ? — Mateen Kadwaikar, Jan 30 '17 at 21:24
@CrazySynthax check out this link for node.js http://stackoverflow.com/questions/4295782/how-do-you-extract-post-data-in-node-js — Mateen Kadwaikar, Jan 30 '17 at 21:32
@CrazySynthax I am not passing values in params. I am passing it in body. Check for the values in body. — Mateen Kadwaikar, Jan 30 '17 at 21:49

LeeJongSung · Answer 3 · 2017-01-30T21:40:32.433

-1

jsonp inserts code block

<script src='http://***.com:3000/login?...'>

in DOM for solving cross domain issue. When src attribute of script tag occurs a request to web server, response body is evaluated as javascript block. just that time, If responsed text block is can't evaluated as javascript. Browser occurs error.

https://en.wikipedia.org/wiki/JSONP

edited Jan 30 '17 at 21:40

answered Jan 30 '17 at 21:30

LeeJongSung

1
1

JQuery AJAX: Why is HTTP-code 200 sent and still AJAX request is considered as failed

3 Answers3