Update two different values with one AJAX response

Question

I want to update two different values with one ajax-response.

<span id="nr1">Change this</span>
<span id="nr2">and change this</span>

Now I can just change one value, I do like this:

document.getElementById('nr1').innerHTML = xmlHttp.responseText;

Is it possible to do something like this:

document.getElementById('nr1').innerHTML = xmlHttp.responseText1;
document.getElementById('nr2').innerHTML = xmlHttp.responseText2;

** UPDATE ** The response comes from php. I'm totally new to JSON.

Answer 1

If you trust and control the server, just return a dictionary in JSON for the response and use it on the client side. So:

v = eval(xmlHttp.responseText);
document.getElementById('nr1').innerHTML = v['nr1']
document.getElementById('nr2').innerHTML = v['nr2']

Answer 2

There are no responseText1 and responseText2 properties of an XMLHTTPRequest(which I assume your xmlHttp is), just responseText, so you have to return something parsable in that responseText field(like JSON). So you server may send back {"firstResponse":"value1","secondResponse":"value2"} and you can fill your fields from that JSON string. Use the json2.js library from json.org

<script type="text/javascript" src="json2.js"></script>
. . .
var theResponse = JSON.parse(xmlHttp.responseText);
document.getElementById('nr1').innerHTML = theResponse.firstResponse;
document.getElementById('nr2').innerHTML = theResponse.secondResponse;

EDIT: In order to craft this JSON response from PHP you should use the PHP JSON libraries. There are several examples in the json_encode page that can get you started. The other code I posted(and that is posted in other responses) are all browser side javascript code.

$arr = array ('firstResponse'=>'value1','secondResponse'=>'value2');
echo json_encode($arr);

Place that code into your PHP script to generate the JSON string

{"firstResponse":"value1","secondResponse":"value2"}

Then the previously posted javascript code will parse that.

Answer 3

As already said it would make sense to return your Ajax call as a JSON Object. I recommend the more secure JSONP call (don't know if you can use any library that supports this natively).

// Your script returns this
callback123(
{
    "nr1" : "This is conten for nr1",
    "nr2" : "Some content for nr2"
});

// JavaScript callback looks like this
function callback123(data)
{
    for(var key in data)
     document.getElementById(key).innerHTML = data[key];
}

Answer 4

use JSON.parse

link text

Answer 5

good, tengkyu. I will try...