lumine lumine - 3 months ago 14
Ajax Question

AJAX parseerror after success handler is called

I have weird situations when using AJAX in jQuery.
I use node.js along with express.js on the backend side, here simple route that i wrote for my backend:

app.all('/*', (request, response, next) => {
response.header('Access-Control-Allow-Origin', '*');
response.header('Access-Control-Allow-Methods', 'POST,GET');
response.header('Access-Control-Allow-Headers', 'Content-Type,accept,access_token,X-Requested-With');
next();
});

app.post('test', (request, response) => {
response.json(
{
"message": "success",
"data" : "test"
}
);

// I also tried to chain .status(200) before calling .json(), the problem still occur
});


now in the frontend, I use following code to perform request:

export class TestPage {
constructor() {
this._name = 'test';
}

get name() {
return this._name;
}

performRequest() {
$.ajax({
type: 'POST',
url: 'localhost:15000/test',
data: { "test": "nothing" },
dataType: 'json',
success: (response) => {
console.log(response);
},
error: (xhr, status, err) => {
console.log(xhr.responseText);
console.log(status);
console.log(err);
}
});
}
}


and call the class from my main script like this:

import { TestPage } from './TestPage'

let test = new TestPage();
test.performRequest();


Now after AJAX perform the request, it will trigger the success callback, however, error callback is triggered as well.

Here what i got from console window:
Console Window

As you might notice, the 1st log is come from success callback, the rest are come from error callback.

Any ideas what happening here and how to resolve this problem? thanks

---- EDIT ----

I found the source of errors, so in short I use babel in order to use ES6 features and I use class on the client side

if I move the request to constructor like:

export class TestPage {

constructor() {
this._name = 'test'
$.ajax({
type: 'POST',
url: 'localhost:15000/test',
data: { "test": "nothing" },
dataType: 'json',
success: (response) => {
console.log(response);
},
error: (xhr, status, err) => {
console.log(xhr.responseText);
console.log(status);
console.log(err);
}
});
}

get name() {
return this._name;
}
}


and call it:

let test = new TestPage();


It works! without error callback being called.

Now my question, how this can be happen? why? and how do i separate the request call to a function? calling request in constructor is not something that i wanted because probably I want to encapsulate the request somewhere in my class.

Answer

I'm unable to reproduce the issue (I'm using babel.js to enable ES6), I doubt the code you posted here is your actual code.

But here my suggestions:

  1. Make sure logs come from the corresponding ajax request, not from another request. (like being @Ozan said, double check it for sure)
  2. Make sure your callback isn't throwing an error. (in case your actual code is different from this post)
  3. Try to make a request on plan javascript.
  4. Try to log the request object from the server side, maybe you will find something useful
  5. A bit ugly but you can try to parse the response manually, remove dataType: 'json' and use JSON.parse(response) on client side to retrieve the JSON object, use try-catch block may helpful in case it fail to parse it.

But like @Ozan said, something like this should never happen, post your actual / full code in case it is different.

Comments