如何在JavaScript中动态调用PHP函数

Question

我有一个包含以下js函数的index.php文件：

function returnImageString() {
    return "<?php include 'inc/image.functions.php'; echo getRandomImages(7); ?>";        //This isn't dynamic; this will always return the same images.  How do I fix this?
}

然而，当页面加载时，php脚本被调用并将结果添加到源代码中，如下所示：

function returnImageString() {
    return "images/20.11.A1B9.jpg|images/8.14.47683.jpg|images/19.10.FBB9.jpg|images/21.12.9A.jpg|images/8.11.1474937909.jpg|images/8.15.99404.jpg|images/8.10.jpg|"; //This isn't dynamic; this will always return the same images. How do I fix this?
 }

我的要求是每当我调用js函数(returnImageString)时，它都要调用php函数(因为php函数返回随机图像位置的字符串)，而不是在js函数中硬编码字符串。

有人能指点我吗？谢谢！

- bryan

Answer 1

这是不可能的，因为你混淆了客户端行为和服务器端行为。你需要做的是创建一个到服务器的AJAX请求。

如果你使用像jQuery这样的库(非常推荐，因为它使得AJAX变得轻松)，你可以像下面这样做:

PHP代码(也许是randomImages.php?)

// query for all images
// $_GET['limit'] will have the limit of images
// since we passed it from the Javascript
// put them all in an array like this:
$images = array('images/20.11.A1B9.jpg','images/20.11.A1B9.jpg',...);
print json_encode($images); // return them to the client in JSON format.
exit;

客户端JavaScript

function getRandomImages(limit) {
    // make request to the server
    $.getJSON('/path/to/randomImages.php', {limit: limit}, function(data) {
        // data is now an array with all the images
        $.each(data, function(i) {
            // do something with each image
            // data[i] will have the image path
        });
    });
}

另外，如果图片数量是有限的，您可以跳过所有这些疯狂的步骤，只需创建一个包含所有图片的数组，并从Javascript中生成8个随机图像。这对于较小的数据集甚至一些较大的数据集可能更好。

- Paolo Bergantino

---

不幸的是，图像数量并非有限。我只是从数据库中获取 x 张随机图片，并希望将它们传递给 JS 创建一个数组。 - bryan

在这种情况下，每当您需要一个新的集合时，您都必须查询服务器。 - Paolo Bergantino

Answer 2

你不能直接这样做，因为PHP是在服务器上解释的，而你正在客户端使用JavaScript。但是，如果你在服务器上创建一个名为random-image.php的页面，你可以使用AJAX获取数据，并在返回时在服务器端进行操作。

- nickohrn

Answer 3

你有两个选择：

1. 使用 AJAX
2. 使用 PHP 在 script 标签内输出一个 JavaScript 数组（包含可能的图片值），然后构建一个 JavaScript 函数，在调用时随机选择其中一个。

在我看来，第二个选项似乎是最好的。

- Ionut G. Stan

---

嘿，我其实很喜欢第二个选项。我会试一下的，谢谢！ - bryan

实际上，算了吧。我不确定那会不会管用。当函数被调用时，我希望它能从数据库中随机获取x张图片。我认为无法构建一个包含所有图片的JS数组，然后随机选择一张；这会对我的数据库产生太大的负载。 - bryan

取决于您在数据库中存储了多少图像。最好建立一个JS数组来获取元素，而不是为每个JS函数调用进行一次Ajax调用。在后面的例子中，与前者相比，对数据库的访问更多。 - Ionuț G. Stan

Answer 4

我之前做过这个...也许可以帮到你。 这是一个在javascript中使用ajax调用php函数的示例。(我使用了gzcompress) 要使此演示工作，php文件必须命名为foo.php。

javascript:

//lib
(function(a){for(var b in a)(function(c){a[b]=function(){c.apply(this,arguments);return this}})(a[b])})(XMLHttpRequest.prototype);

XMLHttpRequest.prototype.$p=function(a,b){for(b in a)this[b]=a[b];return this};

(function(a,d,i){for(i in d=document.getElementsByTagName('*'))a[d[i].id]=d[i]})(document);
//lib

function gzcompress(s,c){

    var buffer;

    (new XMLHttpRequest)

    .$p({onreadystatechange:function(){if(this.readyState>3){

        buffer = this.responseText;

    }}})

    .open("POST","foo.php",!1)
    .setRequestHeader("Content-type","application/x-www-form-urlencoded")
    .send(
        "s="+s
        +"&"+
        "c="+c
    );
    return buffer;
}

//look! it's gzcompress inside javascript! it's magical!
document.myDiv.innerHTML = gzcompress("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",2)

PHP：

<?php 

echo gzcompress($_POST['s'], $_POST['c']);

?>

- william malo

Answer 5

你可以使用我的mwsX库在Javascript中使用你的PHP函数。

mwsX库： https://github.com/loureirorg/mwsx

- Daniel Loureiro

Answer 6

这通常被称为Ajax。在谷歌上搜索它。

- troelskn