Using JSON to parse xmlhttp.responseText for populating textboxes

Question

How can JSON be used to parse xmlhttp.responseText? I can't seem to get textboxes populated using the parsed data. I tried using .value and .innerHTML with the dot notation with b.first and b.second used with json_encode from the loadTextBox.php file (see below), but the textboxes won't populate.

Main page code:

function loadDoc()
{
   var xmlhttp;

   // code for IE7+, Firefox, Chrome, Opera, Safari
   if (window.XMLHttpRequest)
   {
      xmlhttp=new XMLHttpRequest();
   }
   //code for IE6, IE5
   else
   {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

   xmlhttp.onreadystatechange=function()
   {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
         var doc = window.document.createElement("doc");
         var a = xmlhttp.responseText;
         var b = JSON.parse(a);
         document.getElementById("textbox").innerHTML=b.first;
         document.getElementById("textbox2").innerHTML=b.second;
      }
   }

   xmlhttp.open("GET","loadTextBox.php?id=4",true);
   xmlhttp.send();
}

loadTextBox.php code:

<?php
---Placeholder for correct DB login info---

$result = $mysql->query("SELECT column_one FROM table_one");

while ($row = $result->fetch_object())
{
   $queryResult[] = $row->present_tense;
}
$textboxValue = $queryResult[0];
$textboxValue2 = $queryResult[2];
echo json_encode(array('first'=>$textboxValue,'second'=>$textboxValue2));
?>

Don't do it in the hard way. Do use a third party library such as jQuery :) You'll do it in the wrong way 99% of the time. — roland
– roland, Commented Sep 10, 2012 at 20:38
I would highly recommend you use jquery instead of rolling your own ajax thing. what you want is simply an option to the $.ajax function — Claudiu
– Claudiu, Commented Sep 10, 2012 at 20:39
In my question I said I tried .value already, but it doesn't work either. — programm3r
– programm3r, Commented Sep 10, 2012 at 20:42

cube · Accepted Answer · 2012-09-11 02:06:40Z

8

This is fully tested and works. Use as a starting point to accomplish what you are trying to do:

var url = "YOUR.php"

var ajax = new XMLHttpRequest();
ajax.open("GET", url, true);
ajax.send(null);
ajax.onreadystatechange = function () {

     if (ajax.readyState == 4 && (ajax.status == 200)) {

        console.log("ready")            
        var Data = JSON.parse(ajax.responseText);
        console.log(Data);
        console.log(Data.first);

    } else {
        console.log("not ready yet")            
    }
}

This assumes your JSON output is properly formatted as you stated:

{"first":"radim","second":"radi"}

answered Sep 11, 2012 at 2:06

cube

1,8024 gold badges25 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cube Over a year ago

Works for me using your code as well: http://znibble.com/test.php for the JSON result, and http://znibble.com/test.html for the ajax call. The php source is simply: <?php echo '{"first":"radim","second":"radi"}';?> which simulates your JSON output, and you can look at the source code for the html/js from your browser. All works fine.

programm3r Over a year ago

I have figured out the underlying problem. Extra tags were being sent because I had extra unnecessary tags in my DB info file. Those tags were being sent in the responseText with {"first":"radim","second":"radi"}. I also changed .innerHTML to .value and now it works as intended.

programm3r · Accepted Answer · 2012-09-11 15:37:59Z

I have figured out the underlying problem. Extra tags were being sent because I had unnecessary tags in my DB info file. Those tags were being sent in the responseText with {"first":"radim","second":"radi"}. So the code pertaining to ---Placeholder for correct DB login info--- was wrong. I also changed .innerHTML to .value and now it works as intended.

Main page code updated:

function loadDoc()
{
   var xmlhttp;

   // code for IE7+, Firefox, Chrome, Opera, Safari
   if (window.XMLHttpRequest)
   {
      xmlhttp=new XMLHttpRequest();
   }
   // code for IE6, IE5
   else
   {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

   xmlhttp.onreadystatechange=function()
   {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
         var a = JSON.parse(xmlhttp.responseText);
         document.getElementById("textbox").value=a.first;
         document.getElementById("textbox2").value=a.second;
      }
   }

   xmlhttp.open("GET","loadTextBox.php?id=4",true);
   xmlhttp.send();
}

Collectives™ on Stack Overflow

Using JSON to parse xmlhttp.responseText for populating textboxes

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related