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功能。

有人能指出我正确的方向吗？谢谢！

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个随机图像。对于较小的数据集甚至是较大的数据集，这可能会更好。

Answer 2

您无法直接执行此操作，因为PHP已在服务器上进行解释，并且您在客户端上使用JavaScript。但是，如果您在服务器上创建了一个random-image.php页面，则可以使用AJAX获取数据，并在返回时对其进行操作。

Answer 3

您有两种选择：

使用AJAX
使用PHP在脚本标记内回显JavaScript数组（可能的图像值），然后构建一个JavaScript函数，在调用时随机选择其中一个。

在我看来，第二种选择似乎是最好的。

Answer 4

我做了一会儿......也许它可以帮助你。这是用ajax在javascript中调用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']);

?>

Answer 5

您可以使用我的mwsX库在Javascript上使用您的PHP函数。

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

Answer 6

通常称为Ajax。谷歌吧。

如何在javascript中动态调用php函数

6 个答案:

PHP代码（也许是randomImages.php？）

客户端Javascript