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

У меня есть 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.

Может ли кто-нибудь указать мне в правильном направлении? Благодаря!

Это невозможно, потому что вы смешиваете поведение на стороне клиента с поведением на стороне сервера. Что вам нужно сделать, так это создать запрос 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. Вероятно, это было бы лучше для небольших наборов данных и даже некоторых более крупных.

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

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

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

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

Я сделал это некоторое время назад … может быть, это может вам помочь. Это пример вызова функции 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']); ?> 

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

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

Это обычно называют Ajax. Google для этого.