Как динамически вызывать функцию php в javascript

Question

У меня есть index.php со следующей функцией js:

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
        });
    });
}

В качестве альтернативы, если количество изображений конечно, вы можете пропустить все это безумие и просто получить массив со всеми изображениями и сгенерировать 8 случайных из самого Javascript. Это, вероятно, будет лучше для небольших наборов данных и даже для некоторых более крупных.

Answer 2

Вы не сможете сделать это напрямую, потому что PHP интерпретируется на сервере, и вы используете JavaScript на клиенте. Однако, если вы создадите страницу random-image.php на своем сервере, вы можете получить данные с помощью AJAX и манипулировать ими на стороне сервера, когда они возвращаются.

Answer 3

У вас есть два варианта:

1. Используйте AJAX
2. Используйте PHP для отображения массива JavaScript (возможных значений изображения) внутри тегов скрипта, а затем создайте функцию JavaScript для случайного выбора одного из них при вызове.

Второй вариант, на мой взгляд, кажется лучшим.

Answer 4

вы можете использовать мою библиотеку mwsX для использования ваших функций PHP в Javascript.

библиотека mwsX: https://github.com/loureirorg/mwsx

Answer 5

Я сделал это некоторое время назад ... может быть, это может помочь вам. Это пример вызова функции php внутри javascript с помощью ajax. (Я использовал 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 6

Это широко известно как Ajax. Google для этого.