Виклик функції php з JavaScript

Question 1

Чи є спосіб запустити функцію php через функцію JS?

щось на зразок цього:

<script type="text/javascript">
function test(){
document.getElementById("php_code").innerHTML="<?php 
query("hello");       ?>";    
}
</script>

<a href="#" style="display:block; color:#000033; font-family:Tahoma; font-size:12px;"     
onclick="test(); return false;"> test </a>
<span id="php_code"> </span>

Я в основному хочу запустити функцію php query("hello"), коли я натискаю href з назвою "Test", який викликає функцію php.

Question 2

Це, по суті, то , що AJAX є для . Ваша сторінка завантажується, і ви додаєте подію до елемента. Коли користувач спричиняє активацію події, скажімо, клацнувши щось, ваш Javascript використовує об’єкт XMLHttpRequest для надсилання запиту на сервер.

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

Ви можете зробити це «від руки» за допомогою простого Javascript, або скористатися jQuery. Залежно від розміру вашого проекту та конкретної ситуації, може бути простіше просто використовувати Javascript.

Звичайний Javascript

У цьому дуже базовому прикладі ми надсилаємо запит, myAjax.phpколи користувач натискає посилання. Сервер буде генерувати певний вміст, в цьому випадку "привіт світ!". Ми помістимо в елемент HTML з ідентифікатором output.

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 et al)

Можна стверджувати, що це багато коду Javascript. Ви можете скоротити це, затягнувши блоки або використовуючи більш стислі логічні оператори, звичайно, але там ще багато чого відбувається. Якщо ви плануєте робити багато подібних речей у своєму проекті, вам може бути краще з бібліотекою javascript.

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

// handles the click event, sends the query
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/

Question 3

PHP оцінюється на сервері; Javascript оцінюється на клієнті / браузері, таким чином , ви не можете викликати PHP функцію з JavaScript безпосередньо . Але ви можете надіслати запит HTTP на сервер, який активує функцію PHP, за допомогою AJAX.

Question 4

Єдиний спосіб виконати 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); який отримує масив як аргумент.

Question 5

Нещодавно я опублікував плагін 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/"]