javascript - 如何在 XHR 调用中使用响应 PHP 变量?

标签 javascript php ajax xmlhttprequest

我有两个页面,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/

相关文章:

javascript - Angular ng-repeat 在 HTML 表中打印数组值

javascript - 如何在 ESLint 中设置全局警告级别?

javascript - Canvas 通过 anchor 连接矩形与矩形

php - 数据依赖,PHP

javascript - 使用 laravel 从 php 发送变量到 javascript 的最佳方法

javascript - AJAX 调用 CKEDITOR 可见性不起作用

javascript - 如何更改 infovis spacetree 中的默认方向?

php - 在我的 php 脚本中,我与服务器的连接有效,但我的 sql 查询不起作用

php - 使用 Ajax 和 Laravel 5.6 上传多个图像

asp.net - 单击“确定”或“取消”时防止隐藏 ModalPopupExtender