Jquery responseText undefined

Question

I have a problem with ajax response. I have an ajax request that sends Json to a server, and the response return a json too.

I receive the response but I can't reach the responseText. Here below there is my code:

$('#outside').click(function() {
  var formData = '{"nin":"3","etype":"iso","perror":"1000","filename":"C:/Users/Mary/workspace/tdiclient/helloworld.txt"}'// _ sono i due punti e -e il bckslash
  var response = '';
  var posts= $.ajax({
     headers: { 
      'Accept': 'application/json',
      'Content-Type': 'application/json', 
     },
    'url' : 'http://localhost:8080/com.tdi/rest/tdi/newcontent/parameters',
    'type' : 'POST',
    'data' : formData,
    responseText: {
      success: true,
      mode: "Online"
    }
  })

  console.log(posts);
  if(posts.readyState == '1'){
    alert(posts.responseText);
  }
});

The problem is that I get the following error:

Cannot read property 'responseText' of undefined

but the console.log(posts) print all the response like this:

I googled and I tried many solutions but I can't find the solution

It seems like you are mixing the native XHR object and the JQuery wrapper for it. Why are you defining `responseText` in your code instead of setting up a "succes" callback function where you can access it? — Scott Marcus, Feb 21 '17 at 20:43
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Mihai Alexandru-Ionut, Feb 21 '17 at 20:44
@mary: Given the code example you provided, there should be no error. The `$.ajax()` method will return an object to `posts`, so `posts.responseText` won't produce that error. It may not have the data you desire, of course. — , Feb 21 '17 at 20:45
...and while I don't use jQuery, I also don't see any documentation for setting a `responseText` property while making the request. — , Feb 21 '17 at 20:50

score 0 · Answer 1 · answered Feb 21 '17 at 20:51

I think you're a bit confused about how to use the $.ajax() method. Try this:

$('#outside').click(function() {
  var formData = '{"nin":"3","etype":"iso","perror":"1000","filename":"C:/Users/Mary/workspace/tdiclient/helloworld.txt"}'// _ sono i due punti e -e il bckslash
  var response = '';
  var posts = $.ajax({
     headers: { 
      'Accept': 'application/json',
      'Content-Type': 'application/json', 
     },
    'url' : 'http://localhost:8080/com.tdi/rest/tdi/newcontent/parameters',
    'type' : 'POST',
    'data' : formData
  })

  posts.done(function(res){
     console.log(res) // res should be your responseText
  })
});

Additionally, I'm not entirely confident that your headers are valid. Maybe someone else can comment on that.

I tried also with the property success/always/error and always it print 'undefined' — mary, Feb 22 '17 at 20:46

floriangosse · Answer 2 · 2017-02-21T21:09:01.753

There is a special case with the console.log because it get the reference to the jqXHR object which was returned by $.ajax(). And because it's a reference it can happen some times that the DevTools will show the content of an object (or array) of a later time.

The main problem is that you are trying to access the responseText diretly after sending your request with $.ajax which is asynchronously. The property responseText will contain the content of the response after the request is fulfilled. To handle that you must use a callback which will be executed after the request was successful. The jqXHR object provides the method done which takes a functon as argument which will be executed when the request was successful.

Here is an example how you could do it:

$('#outside').click(function() {
  var formData = '{"nin":"3","etype":"iso","perror":"1000","filename":"C:/Users/Mary/workspace/tdiclient/helloworld.txt"}'// _ sono i due punti e -e il bckslash
  var response = '';
  var posts= $.ajax({
     headers: { 
      'Accept': 'application/json',
      'Content-Type': 'application/json', 
     },
    'url' : 'http://localhost:8080/com.tdi/rest/tdi/newcontent/parameters',
    'type' : 'POST',
    'data' : formData
  })

  posts.done(function (data) {
    console.log(data);
    alert(data);
  })
});

Note: I remove the the responseText on the ajax config object because it's not an accepted option for $.ajax().

Jquery responseText undefined

2 Answers2