php - 从 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函数。

Answer 1

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

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

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

纯 Javascript

在这个非常基本的示例中，当用户单击链接时，我们向 myAjax.php 发送请求。服务器将生成一些内容，在本例中为“hello world!”。我们将放入带有 output id 的 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 代码。当然，您可以通过收紧 block 或使用更简洁的逻辑运算符来缩短它，但仍有很多事情要做。如果您打算在您的项目中做很多此类事情，那么最好使用 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 库文件中，您会发现与第一个示例类似的代码，以及更多。这可能是件好事，也可能不是。计划并考虑您项目的当前规模和 future 扩展的可能性以及目标环境或平台。

如果这就是你需要做的全部，写一次纯javascript就完成了。

文档

• AJAX 在 MDN - https://developer.mozilla.org/en/ajax
• XMLHttpRequest 在 MDN - https://developer.mozilla.org/en/XMLHttpRequest
• XMLHttpRequest 在 MSDN - 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/