我有两个页面,page1.php 和 page2.php。在 page1.php 中,我有一个按钮,单击它时,它会对 page2.php 进行 XHR 调用,并在定义的分区中显示响应,即 page1 中的“打印”。
page1.php 的代码
<html>
<button type="button" onclick="randomFunction()">Request data</button>
<div id="print"></div>
<script type="text/javascript">
function randomFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("print").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","page2.php",true);
xmlhttp.send();
}
</script>
</html>
page2.php 的代码
<?php
$a = "apple";
$b = "banana";
echo $a;
echo $b;
?>
我现在得到的输出,/image/WDdaa.jpg
我想操纵从第 2 页获得的响应。如我想在 page1.php 上以红色显示“苹果”,以蓝色显示“香蕉”
我该怎么做?
最佳答案
从 page2.php
发回 JSON,然后将包含该数据的自定义 HTML 添加到 page1.php
。
page1.php
<html>
<button type="button" onclick="randomFunction()">Request data</button>
<div id="print"></div>
<script type="text/javascript">
function randomFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var data = JSON.parse(xmlhttp.responseText);
var html = '<span class="apple">'+data.a+'</span><span class="banana">'+data.b+'</span>';
document.getElementById("print").innerHTML = html;
}
}
xmlhttp.open("POST","page2.php",true);
xmlhttp.send();
}
</script>
</html>
page2.php
<?php
$a = "apple";
$b = "banana";
echo json_encode( array( 'a' => $a, 'b' => $b ) );
?>
现在您可以根据需要设置这些 span
的样式。当然,您可以根据需要编辑 HTML 结构。
仅 PHP
page1.php
<html>
<a href="?showData=1">Request data</a>
<div id="print">
<?php
// Show data only, if our link was clicked
if( $_GET['showData'] == 1 ){
// Get page2.php
require_once('page2.php');
echo '<span class="apple">'.$a.'</span><span class="banana">'.$b.'</span>';
}
?>
</div>
</html>
page2.php
<?php
$a = "apple";
$b = "banana";
?>
关于javascript - 如何在 XHR 调用中使用响应 PHP 变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30498418/