如何使用AJAX返回两个字符串？

Question

How to return two parametres using AJAX?

Here is what I have. Here are 2 textareas on my html page.

<textarea name="source" id="source" onkeyup="myfunc(this.value);}"></textarea>
<textarea name="res1" id="res1"></textarea>
<textarea name="res2" id="res2"></textarea>

Onkeyup event calls myfunc() function from .js file.

myfunc() contains such strings:

...
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("res1").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("POST","ajax_file.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset= UTF-8");
xmlhttp.send("q="+encodeURIComponent(str));

As result, ajax_file.php makes some computations, calculates q and p and returns q. String q returned to textarea res1. Everything is OK, it works fine. But, I would like to pass the value p to res2 (another textarea) as well. It's calculated, but I don't know how to pass back more than one parameter. What's the way to do that? Thank you.

Answer 1

the most obvious way (if you want to send two parameters) is

xmlhttp.send("q="+encodeURIComponent(str)+"&p="+encodeURIComponent(str1));

if you want to return two parameters, use an array in php and encode it in json

$arr = array();

$arr['str1'] = $str1;
$arr['str2'] = $str2;
header('Content-type: application/json');
echo json_encode($arr);

EDIT - set also the correcxt headers before echoing the array. After doing that, parse the JSON on the client

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var resp = JSON.parse(xmlhttp.responseText);
        document.getElementById("res1").innerHTML=resp.str1;
        document.getElementById("res1").innerHTML=resp.str2;
    }
}