Response always whole ajax-packet

Question

I get always the whole ajax-packet instead of simple response (true/false) as return of this function (responseJSON.success/responseText.success). Otherwise, the browser sends me an error or fault result with described content

 function isUnique(inputObject) { let type = $(inputObject).attr('id'); let res = $.ajax({ url: '/dbajax.php', method: 'POST', data: {[type]: $(inputObject).val()}, dataType: 'JSON', success: function(data) { return data }, error: function(data) { } }) console.log(res.responseJSON.success); // -> error: Cannot read property 'success' of undefined console.log(res.responseJSON); // -> undefined return res; }

 <?php require('db/dbqueries.php'); if(isset($_POST['username'])){ $login_username = select_login_where_username ($_POST["username"]); echo json_encode(array('success' => empty($login_username),)); } if(isset($_POST['email'])){ $profile_email = select_profile_email_where_email ($email); echo json_encode(array('success' => empty($profile_email),)); } ?>

Answer 1

Your problem is related to the fact that $.ajax is asynchronous. So if you write something after $.ajax it will be done before the request has been processed. You should do everything in the success function.

 function isUnique(inputObject) { let type = $(inputObject).attr('id'); let res = $.ajax({ url: '/dbajax.php', method: 'POST', data: {[type]: $(inputObject).val()}, dataType: 'JSON', success: function(data) { console.log(data)}, error: function(data) { console.log(data) } }) }

 <?php require('db/dbqueries.php'); if(isset($_POST['username'])){ $login_username = select_login_where_username ($_POST["username"]); echo json_encode(array('success' => empty($login_username),)); } if(isset($_POST['email'])){ $profile_email = select_profile_email_where_email ($email); echo json_encode(array('success' => empty($profile_email),)); } ?>

Answer 2

You are trying to access the responseJSON before the ajax request has completed. you need to wait for the ajax to finish before you can use it. There are two ways you can do this -

As mentioned by robinvrd use the success and error functions:

function isUnique(inputObject) {
    let type = $(inputObject).attr('id');
    let res = $.ajax({
      url: '/dbajax.php',
      method: 'POST',
      data: {[type]: $(inputObject).val()},
      dataType: 'JSON',
      success: function(data) { 
          console.log(data.success); //this will fire when the ajax request is finished and return the data
      },
      error: function(data) {
         console.error(data); //this will tell you of any errors after the request has been made
     }
    })
    return res;
}

or use the callbacks on the request object:

function isUnique(inputObject) {
    let type = $(inputObject).attr('id');
    let res = $.ajax({
      url: '/dbajax.php',
      method: 'POST',
      data: {[type]: $(inputObject).val()},
      dataType: 'JSON'
    })

    res.done(function(result) {
       console.log(res.responseJSON.success); 
    });

    res.fail(function( jqXHR, textStatus) {
       console.error("Request failed: " + textStatus);
    });

    return res;
}