How to display responseText from the return object in jquery

Question

I have Jquery code

  $('#add_companies').click( function(e) {
    var form_id   = '#'+ $(this).parents('form').attr('id');
    var result    = do_submit(form_id);
    console.log(result);
  });

The code get the data from the form given by the form id and do the submit, using

do_submit()

do_submit() function

function do_submit(form_id) {
  var url         = $(form_id).attr("action");
  var ajax_result = false;

  // Submit form using ajax
  ajax_result = $.ajax({
    type: "POST",
    url: url,
    data: $(form_id).serialize(),
    dataType: 'json',
    success: function(result) {
      return result;
    },
    error: function(result) {
        // code here
      });
    },
  });

  return ajax_result;
} // End do_submit()

after the successful submit, it return an object stored in result with this data

Object {readyState: 1}
abort: function(a)
always: function()
complete: function()
done: function()
error: function()
fail: function()
getAllResponseHeaders: function()
getResponseHeader: function(a)
overrideMimeType: function(a)
pipe: function()
progress: function()
promise: function(a)
readyState: 4
responseJSON: 1
responseText: "1"
setRequestHeader: function(a,b)
state: function()
status: 200
statusCode: function(a)
statusText: "OK"
success: function()
then: function()
__proto__: Object

when I try to get the value of result responsetext in this format

result.responseText

console says

undefined

how to properly get the responseText?

Show how you submit form and receive response and how you access it's properties. Maybe you are accessing response before it has returned from server (common ajax error) — Justinas, May 13 '16 at 06:36

score 2 · Answer 1 · answered May 13 '16 at 06:56

When you return from do_submit your ajax is still processing, because it's async process. That's why your console.log(result); is null.

Instead you can call some function that will be executed after your ajax is done:

-- do_submit--

$.ajax({
    success: function (response) {
        processSubmitResponse(response);
    }
});
// here `response` is still null

----

// actual logic after submit of form.
// May be moved directly to anonymous function in `success`
function processSubmitResponse(response) {
    console.log(result);
}

score 0 · Answer 2 · edited May 13 '16 at 07:38

You need to pass callback to your do_submit method like below:

......
do_submit(form_id, myCallback)
....

and then

function do_submit(form_id, myCallback) {
  var url = $(form_id).attr("action");
  var ajax_result = false;

 // Submit form using ajax
 $.ajax({         // AJAX is Async
  type: "POST",
  url: url,
  data: $(form_id).serialize(),
  dataType: 'json',
  success: function(result) {
     myCallback(result);  // pass this result to your callback. Gets called when response is received with status : 200
 },
 error: function(result) {
    // code here
 },
});


}

in your callback:

function myCallback(res){
    // console.log(res.responseText);
}

Alternative: Using jQuery promise

     ......
     var ajaxCall = do_submit(form_id);
     $.when(ajaxCall).done(function(response){
        //console.log(response.responseText);
     });
     ....

and then

function do_submit(form_id) {
  var deferredObject = $.Deferred();
  var url = $(form_id).attr("action");
  var ajax_result = false;

 // Submit form using ajax
  $.ajax({         // AJAX is Async
   type: "POST",
   url: url,
   data: $(form_id).serialize(),
   dataType: 'json',
   success: function(result) {
     deferredObject.resolve(result); // resolves the promise
   },
   error: function(result) {
    // code here
   },
 });

 return deferredObject .promise(); // return promise immediately.
}

score 0 · Answer 3 · answered May 09 '19 at 08:49

0

I had same issue and this worked for me.

result["responseText"]

answered May 09 '19 at 08:49

Abdullah Aden

882
9
13

score -2 · Accepted Answer · answered May 13 '16 at 06:51

-2

function do_submit(form_id) {
    var url = $(form_id).attr("action");
    var ajax_result = false;

    // Submit form using ajax
    $.ajax({
        type: "POST",
        url: url,
        data: $(form_id).serialize(),
        dataType: 'json',
        //  http://stackoverflow.com/a/1478322/2240375
        async: false,
        success: function (result) {
            return result;
        },
        error: function (result) {
            // code here
            return result;
        }
    });
} // End do_submit()

answered May 13 '16 at 06:51

AsgarAli

2,201
1
20
32

making AJAX `synchronous` is very dangerous. What if the server takes lot of time to respond? – Sandeep Nayak May 13 '16 at 06:57
3

`async: false` is deprecated! `As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated` – Justinas May 13 '16 at 06:58

How to display responseText from the return object in jquery

4 Answers4