php变量ajax传值到js,如何将变量和数据从PHP传递到JavaScript？

实际上有几种方法来做到这一点。一些需要比其他更多的开销，一些被认为比其他更好。

没有特定的顺序：

>使用AJAX从服务器获取所需的数据。

>将数据回到页面的某个地方，并使用JavaScript从DOM获取信息。

>直接回传数据到JavaScript。

在本文中，我们将检查上述每个方法，并查看每个方法的优缺点，以及如何实现它们。

1.使用AJAX从服务器获取所需的数据

这种方法被认为是最好的，因为你的服务器端和客户端脚本是完全独立的。

优点

>更好的层之间的分离 – 如果明天你停止使用PHP，并希望移动到servlet，REST API或一些其他服务，你不必改变很多的JavaScript代码。

>更易读 – JavaScript是JavaScript，PHP是PHP。没有混合两个，你得到更可读的代码在两种语言。

>允许异步数据传输 – 从PHP获取信息可能是时间/资源昂贵。有时你只是不想等待信息，加载页面，并有信息到达每当。

>数据不是直接在标记上找到 – 这意味着您的标记保持清除任何其他数据，只有JavaScript看到它。

缺点

> Latency – AJAX创建一个HTTP请求，HTTP请求通过网络传递并具有网络延迟。

>状态 – 通过单独的HTTP请求获取的数据不会包含来自获取HTML文档的HTTP请求的任何信息。您可能需要此信息(例如，如果HTML文档是响应表单提交而生成的)，如果您这样做，则必须以某种方式传输它。如果您已排除在网页中嵌入数据(如果您使用此技术，则您拥有)，那么这会限制您可能受到比赛条件限制的Cookie /会话。

实现示例

使用AJAX，您需要两个页面，一个是PHP生成输出，第二个是JavaScript获取输出：

get-data.php

/* Do some operation here, like talk to the database, the file-session

* The world beyond, limbo, the city of shimmers, and Canada.

*

* AJAX generally uses strings, but you can output JSON, HTML and XML as well.

* It all depends on the Content-type header that you send with your AJAX

* request. */

echo json_encode(42); //In the end, you need to echo the result.

//All data should be json_encode()d.

//You can json_encode() any value in PHP, arrays, strings,

//even objects.

index.php(或任何实际页面命名为like)

function reqListener () {

console.log(this.responseText);

}

var oReq = new XMLHttpRequest(); //New request object

oReq.onload = function() {

//This is where you handle what to do with the response.

//The actual data is found on this.responseText

alert(this.responseText); //Will alert: 42

};

oReq.open("get", "get-data.php", true);

// ^ Don't block the rest of the execution.

// Don't wait until the request finishes to

// continue.

oReq.send();

上述两个文件的组合将在文件完成加载时提醒42。

一些更多的阅读材料

2.将数据回到页面某处，并使用JavaScript从DOM中获取信息

这种方法不如AJAX优选，但它仍然有它的优点。它在PHP和JavaScript之间仍然相对分离，在某种意义上说，在JavaScript中没有PHP。

优点

>快速DOM操作通常很快，您可以相对快速地存储和访问大量数据。

缺点

>潜在的不起作用的标记 – 通常，会发生什么是你使用某种以存储信息，因为更容易从inputNode.value获取信息，但这样做意味着您在HTML中有一个无意义的元素。 HTML具有元素，并且HTML 5引入了专门用于使用JS进行阅读的数据 – *属性，这些属性可以与特定元素相关联。

> Dirties up the Source – PHP生成的数据直接输出到HTML源代码，这意味着你会得到一个更大，更集中的HTML源代码。

>更难得到结构化数据 – 结构化数据必须是有效的HTML，否则你必须自己转义和转换字符串。

>将PHP与您的数据逻辑紧密耦合 – 由于在演示中使用PHP，因此您无法将两者完全分开。

实现示例

有了这个，想法是创建某种类型的元素，不会显示给用户，但JavaScript是可见的。

index.php

$output = "42"; //Again, do some operation, get the output.

echo htmlspecialchars($output); /* You have to escape because the result

will not be valid HTML otherwise. */

?>

var div = document.getElementById("dom-target");

var myData = div.textContent;

3.直接回传数据到JavaScript

这可能是最容易理解，最可怕的使用。不要这样做，除非你知道你在做什么。

优点

>很容易实现 – 实现这一点很少，并且理解。

>不脏的源 – 变量直接输出到JavaScript，所以DOM不受影响。

缺点

> Insecure – PHP没有琐碎的JavaScript逃逸函数，并且它们不是微不足道的实现。特别是在使用用户输入时，你非常容易受到二次注入。有争议见评论

>将PHP与您的数据逻辑紧密耦合 – 由于在演示中使用PHP，因此您无法将两者完全分开。

>结构化数据很难 – 你可以做JSON … kinda。但是XML和HTML需要特别注意。

实现示例

实施相对直接：

var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; //Don't forget the extra semicolon!

祝你好运！