По сути, это AJAX . Ваша страница загружается, и вы добавляете событие к элементу. Когда пользователь вызывает запуск события, скажем, щелкнув что-то, ваш Javascript использует объект XMLHttpRequest для отправки запроса на сервер.

После того, как сервер отвечает (предположительно с выходом), другая функция / событие Javascript дает вам возможность работать с этим выходом, в том числе просто вставлять его в страницу, как и любой другой фрагмент HTML.

Вы можете сделать это «вручную» с помощью простого Javascript, или вы можете использовать jQuery. В зависимости от размера вашего проекта и конкретной ситуации может быть проще просто использовать простой Javascript.

Обычный Javascript

В этом основном примере мы отправляем запрос на myAjax.php когда пользователь нажимает ссылку. Сервер будет генерировать некоторый контент, в данном случае «привет мир!». Мы помещаем в элемент HTML с output id.

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

Используя тот же HTML и PHP сверху, это весь ваш скрипт (с включенным jQuery на странице). Я немного подтянул код, чтобы быть более совместимым с общим стилем jQuery, но вы поняли:

 // handles the click event, sends the query var 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 вы найдете аналогичный код в первом примере плюс еще много . Это может быть хорошо, может и не так. Планируйте и учитывайте текущий размер вашего проекта и будущую возможность расширения, а также целевую среду или платформу.

Если это все, что вам нужно сделать, напишите простой 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/

PHP оценивается на сервере; javascript оценивается у клиента / браузера, поэтому вы не можете напрямую вызвать функцию PHP из javascript. Но вы можете выдать HTTP-запрос серверу, который активирует функцию PHP, с AJAX.

Единственный способ выполнить PHP из JS – AJAX. Вы можете отправлять данные на сервер (например, GET /ajax.php?do=someFunction), а затем в ajax.php вы пишете:

 function someFunction() { echo 'Answer'; } if ($_GET['do'] === "someFunction") { someFunction(); } 

и затем, поймайте ответ с помощью JS (я использую jQuery для создания AJAX-запросов)

Вероятно, вам понадобится какой-то формат ответа. См. JSON или XML, но JSON прост в использовании с JavaScript. В PHP вы можете использовать функцию json_encode ($ array); который получает массив в качестве аргумента.

Недавно я опубликовал плагин jQuery, который позволяет вам делать вызовы функций PHP различными способами: https://github.com/Xaxis/jquery.php

Простой пример использования:

 // Both .end() and .data() return data to variables var strLenA = P.strlen('some string').end(); var strLenB = P.strlen('another string').end(); var totalStrLen = strLenA + strLenB; console.log( totalStrLen ); // 25 // .data Returns data in an array var data1 = P.crypt("Some Crypt String").data(); console.log( data1 ); // ["$1$Tk1b01rk$shTKSqDslatUSRV3WdlnI/"] 

PHP оценивается на сервере; javascript оценивается у клиента / браузера, поэтому вы не можете напрямую вызвать функцию PHP из javascript. Но вы можете выдать HTTP-запрос серверу, который активирует функцию PHP, с AJAX.

Используя вызов AJAX, мы можем вызвать функцию php, используя методы POST и GET,