如何从Javascript获取PHP脚本输出?

时间:2014-02-23 13:52:42

标签: javascript php jquery html web

这是我想从我的javascript文件中获取输出的PHP脚本示例:

data.php

<?php

$input = file_get_contents('data.txt');
echo $input."\n";

?>

的script.js

$(document).ready(function(){
    var data;
    // get output from data.php
    console.log( data );
});

我只是想要一种方法来测试,以查看存储在php变量中的data.txt文件中的数据是否可以传递到javascript文件中,然后在html页面的javascript控制台中打印。 / p>

我想这样做,以便我可以在文本文件中存储一个变量,然后在同时从多个用户动态更新它时引用它。

我已经看到了这样做的方法,但它涉及javascript与html在同一个文件中,这不是这里的情况。我也在使用jquery所以我不知道这是否有所作为。我之前从未使用过php,也不熟悉javascript,所以任何帮助都会受到赞赏。

2 个答案:

答案 0 :(得分:0)

您可以直接使用jquery读取该文本文件,如下所示:

    $.ajax({
        url : "data.txt",
        dataType: "text",
        success : function (data) {
            // Display the data in console
            console.log(data);
            // Or append it to body
            $('body').append(data);
        }
    });

以同样的方式可以读取php文件的输出,在这种情况下你应该更改url指向你的php文件。您应该阅读的另一件事是与json数据结构等进行服务器 - 客户端通信的不同选项。 文档:https://api.jquery.com/jQuery.ajax/

答案 1 :(得分:0)

如果将扩展名更改为“php”,则可以将php代码放入javascript文件中。由于“php”扩展将默认以Html形式提供,因此您必须声明它是代码中的Javascript。

script.js.php

<?php header('Content-Type: application/javascript');
?>console.log("<?php

$input = file_get_contents('data.txt');
echo $input."\n";

 ?>");
$(document).ready(function(){


 $("#imgTag, #img2").on("click", process);

 var size = 0;

 function getTarget(evt)
 {
    evt = evt || window.event;
    return evt.target || evt.scrElement;
  }

  var temp;
  console.log("before get");
  console.log("post get");
  console.log(size);

  function changeSize(myName, myOther)
  {
     var name = myName;
    var other = myOther;
    if($("#" + name).height() < 400)
    {
       $("#" + name).height($("#" + name).height() + 5);
       $("#" + name).width($("#" + name).width() + 5);
       $("#" + other).height($("#" + other).height() - 5);    
       $("#" + other).width($("#" + other).width() - 5);   
    }    
  }

  function process(event)
  {
     var name = getTarget(event).id;
     var other;
     if(name == "imgTag")
     {
        other = "img2";
     }
    else
      other = "imgTag";

console.log($("#" + name));
console.log("Changing size!!!");
console.log( $("#" + name).height());
changeSize(name, other);
}
});