从 JavaScript 调用 php 函数

Question

有没有办法可以通过 JS 函数运行 php 函数？

像这样的东西：

<script type="text/javascript">
function test(){
document.getElementById("php_code").innerHTML="<?php
query("hello");       ?>";
}
</script>

<a href="#" style="display:block; color:#000033; font-family:Tahoma; font-size:12px;"
onclick="test(); return false;"> test </a>
<span id="php_code"> </span>

我基本上想运行 php 函数 query("hello") ，当我单击名为“Test”的 href 时，它将调用 php 函数。

原文由 Jason Russell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

本质上，这就是 AJAX 的 用途。您的页面加载，并且您将事件添加到元素。当用户触发事件时，比如通过单击某物，您的 Javascript 使用 XMLHttpRequest 对象 向服务器发送请求。

在服务器响应（可能是输出）之后，另一个 Javascript 函数/事件为您提供了使用该输出的位置，包括像任何其他 HTML 一样简单地将其粘贴到页面中。

您可以使用纯 Javascript “手动”完成，也可以使用 jQuery。根据您的项目大小和特定情况，使用纯 Javascript 可能更简单。

纯Javascript

在这个非常基本的示例中，当用户单击链接时，我们向 myAjax.php 发送请求。服务器将生成一些内容，在本例中为“hello world！”。我们将放入带有 id output 的 HTML 元素。

javascript

 // handles the click event for link 1, sends the query
 function getOutput() {
 getRequest(
 'myAjax.php', // URL for the PHP file
 drawOutput, // handle successful request
 drawError // handle error
 );
 return false;
 }
 // handles drawing an error message
 function drawError() {
 var container = document.getElementById('output');
 container.innerHTML = 'Bummer: there was an error!';
 }
 // handles the response, adds the html
 function drawOutput(responseText) {
 var container = document.getElementById('output');
 container.innerHTML = responseText;
 }
 // helper function for cross-browser request object
 function getRequest(url, success, error) {
 var req = false;
 try{
 // most browsers
 req = new XMLHttpRequest();
 } catch (e){
 // IE
 try{
 req = new ActiveXObject("Msxml2.XMLHTTP");
 } catch(e) {
 // try an older version
 try{
 req = new ActiveXObject("Microsoft.XMLHTTP");
 } catch(e) {
 return false;
 }
 }
 }
 if (!req) return false;
 if (typeof success != 'function') success = function () {};
 if (typeof error!= 'function') error = function () {};
 req.onreadystatechange = function(){
 if(req.readyState == 4) {
 return req.status === 200 ?
 success(req.responseText) : error(req.status);
 }
 }
 req.open("GET", url, true);
 req.send(null);
 return req;
 }

的HTML

 <a href="#" onclick="return getOutput();"> test </a>
 <div id="output">waiting for action</div>

PHP的

// file myAjax.php
 <?php
 echo 'hello world!';
 ?>

试试看：http: //jsfiddle.net/GRMule/m8CTk/

---

使用 javascript 库（jQuery 等）

可以说，这是很多 Javascript 代码。当然，您可以通过收紧块或使用更简洁的逻辑运算符来缩短它，但仍有很多事情要做。如果您打算在您的项目中做很多此类事情，那么最好使用 javascript 库。

使用与上面相同的 HTML 和 PHP，这是您的整个脚本（页面中包含 jQuery）。我已经稍微收紧了代码以更符合 jQuery 的一般风格，但你明白了：

 // handles the click event, sends the query
 function getOutput() {
 $.ajax({
 url:'myAjax.php',
 complete: function (response) {
 $('#output').html(response.responseText);
 },
 error: function () {
 $('#output').html('Bummer: there was an error!');
 }
 });
 return false;
 }

试试看：http: //jsfiddle.net/GRMule/WQXXT/

不要急于使用 jQuery：添加任何库仍然会向您的项目添加数百或数千行代码，就像您已经编写它们一样肯定。在 jQuery 库文件中，您会发现与第一个示例类似的代码，以及 更多.这可能是件好事，也可能不是。计划并考虑您项目的当前规模和未来扩展的可能性以及目标环境或平台。

如果这就是您需要做的所有事情，请编写一次纯 JavaScript，然后您就完成了。

文档

• MDN 上的 AJAX - https://developer.mozilla.org/en/ajax

• MDN 上的 XMLHttpRequest - https://developer.mozilla.org/en/XMLHttpRequest

• MSDN 上的 XMLHttpRequest - http://msdn.microsoft.com/en-us/library/ie/ms535874%28v=vs.85%29.aspx

• jQuery - http://jquery.com/download/

• jQuery.ajax - http://api.jquery.com/jQuery.ajax/

原文由 Chris Baker 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

PHP 在服务器上进行评估； javascript 在客户端/浏览器上进行评估，因此您不能 直接 从 javascript 调用 PHP 函数。但是您可以使用 AJAX 向将激活 PHP 函数的服务器发出 HTTP 请求。

原文由 Dor 发布，翻译遵循 CC BY-SA 3.0 许可协议