没有带有xmlhttprequest的responseText

Question

I'm attempting to use a xmlhttprequest to send a php responder an object, run a search query and then send back the result as an object but for some reason there's no result. I can see under the network tab that the responder produces the desired record but its not being handled. I can't for the life of me see the problem.

The request:

 function returnJSON(variable, URL, callback) { var ajaxObj = new XMLHttpRequest(); ajaxObj.open("POST", URL, true); console.log("posting"); ajaxObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); ajaxObj.onreadystatechange = function() { if (ajaxObj.status === 200) if (ajaxObj.readyState === 4) callback(JSON.parse(ajaxObj.responseText)); console.log(ajaxObj.responseText); }; ajaxObj.send(variable); } 

A example function that utilises said callback.

 function getSearch(e){ e.preventDefault(); var prodCode = document.getElementById("productCode").value; var productDetails = "productCode="+prodCode; returnJSON( productDetails, 'api/database/returnSearch.php', function(data) { getSearchResult(data); console.log("working"); } ); if (searchResults.length > 1) { alert("There are too many results to display."); }else if (searchResults.length = 0){ alert("There are no results for "+prodCode); } else if (searchResults.length > 0){ document.getElementById("pCode").value = searchResults[0][0]; document.getElementById("productN").value = searchResults[0][1]; document.getElementById("description").value = searchResults[0][2]; document.getElementById("productType").value = searchResults[0][3]; document.getElementById("price").value = searchResults[0][4]; document.getElementById("quantity").value = searchResults[0][5]; } // setAdmin(); } 

The php responder in question.

 <?php global $range; $range = []; $hostname = 'localhost'; /*** mysql username ***/ $username = 'root'; /*** mysql password ***/ $password = ''; if(isset($_POST['productCode'])){ $prodCode= $_POST['productCode']; $productCode = NULL; $prodName = NULL; $desc = NULL; $prodType = NULL; $price = NULL; $quantity = NULL; $db = new PDO("mysql:host=$hostname;dbname=webcw", $username, $password); $sql = "SELECT productCode, productName, productType, description, price, quantity FROM product WHERE productCode = '$prodCode';"; foreach ($db->query($sql) as $row) : $productCode = $row ['productCode']; $prodName = $row ['productName']; $desc = $row ['description']; $prodType = $row ['productType']; $price = $row ['price']; $quantity = $row ['quantity']; $product = array($prodCode, $prodName, $desc, $prodType, $price, $quantity); $range[] = $product; endforeach; echo json_encode($range); $db = null; } ?> 

Can any of you help?

Thanks in advance for any assistance.

Answer 1

Replace these code lines:

if (ajaxObj.status === 200)
  if (ajaxObj.readyState === 4)
    callback(JSON.parse(ajaxObj.responseText));
    console.log(ajaxObj.responseText);

with these:

if (ajaxObj.readyState === 4) {
   if (ajaxObj.status === 200){
      callback(JSON.parse(ajaxObj.responseText));
      console.log(ajaxObj.responseText);
   }
}

Answer 2

I managed to get it working with

 function returnJSON(variable, URL, callback) { var ajaxObj = new XMLHttpRequest(); ajaxObj.open("POST", URL, true); console.log("posting"); ajaxObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); ajaxObj.addEventListener("load", function() { console.log("received"); callback(JSON.parse(ajaxObj.responseText)); } ); ajaxObj.send(variable); }