使用一个 AJAX 响应更新两个不同的值答案

【问题标题】：Update two different values with one AJAX response使用一个 AJAX 响应更新两个不同的值
【发布时间】：2009-08-25 21:39:58
【问题描述】：

我想用一个 ajax 响应更新两个不同的值。

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

现在我可以只改变一个值，我喜欢这样：

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

是否可以这样做：

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

**** 更新 **** 响应来自 php。我对 JSON 完全陌生。

【问题讨论】：

我在回复中添加了一些指向 PHP JSON 库的链接。 PHP网站上有一些非常好的json_encode示例。

标签： html ajax

【解决方案1】：

XMLHTTPRequest（我假设您的 xmlHttp 是）没有 responseText1 和 responseText2 属性，只有 responseText，因此您必须在该 responseText 字段中返回可解析的内容（如 JSON）。因此，您的服务器可能会发回 {"firstResponse":"value1","secondResponse":"value2"} 并且您可以从该 JSON 字符串中填写您的字段。使用来自 json.org 的 json2.js 库

<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;

编辑： 为了从 PHP 制作这个 JSON 响应，您应该使用 PHP JSON libraries。 json_encode page 中有几个示例可以帮助您入门。我发布的其他代码（并且发布在其他响应中）都是浏览器端的 javascript 代码。

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

将该代码放入您的 PHP 脚本以生成 JSON 字符串

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

然后之前发布的 javascript 代码将对其进行解析。

【讨论】：

我尽量按照你说的去做。我从 php 得到正确的响应：{"firstResponse":"value1","secondResponse":"value2"}。但它不会打印出跨度 nr1 或 nr2 中的任何内容。知道我做错了什么吗？
从 json.org，json.org/json2.js 下载 json2.js 并使用 JSON.parse(xmlHttp.responseText) 而不是 .parseJSON()。我被公司内部问题困扰太久了。
嗯，但它不适用于 åäö。你有任何想法如何处理它。如果我不需要将 åäö 转换为 &aring、&auml 和 ö 就可以了

【解决方案2】：

如果您信任并控制服务器，只需在JSON 中返回一个字典作为响应并在客户端使用它。所以：

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

【讨论】：

好吧，我不确定我得到了洞的图片。我使用 php。你能给我举个例子说明php的外观吗？

【解决方案3】：

如前所述，将 Ajax 调用作为 JSON 对象返回是有意义的。我推荐更安全的 JSONP 调用（不知道是否可以使用任何原生支持此功能的库）。

// 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];
}

【讨论】：

【解决方案4】：

使用 JSON.parse

link text

【讨论】：