web-dev-qa-db-fra.com

Appelez la fonction php depuis JavaScript

Existe-t-il un moyen de faire fonctionner une fonction php via une fonction JS?

quelque chose comme ça:

<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>

Je veux fondamentalement exécuter la fonction php query("hello"), lorsque je clique sur le href appelé "Test" qui appellerait la fonction php.

phpjavascripthtmlajax
76
Jason Russell

Ceci est essentiellement ce que AJAX est pour . Votre page se charge et vous ajoutez un événement à un élément. Lorsque l'utilisateur déclenche l'événement, par exemple en cliquant sur quelque chose, votre code Javascript utilise l'objet objet XMLHttpRequest pour envoyer une demande à un serveur.

Une fois que le serveur a répondu (vraisemblablement avec la sortie), une autre fonction/événement Javascript vous permet de travailler avec cette sortie, y compris simplement de la coller dans la page comme tout autre élément HTML.

Vous pouvez le faire "à la main" avec Javascript, ou jQuery. En fonction de la taille de votre projet et de la situation particulière, il peut s'avérer plus simple d'utiliser simplement du Javascript.

Javascript simple

Dans cet exemple très basique, nous envoyons une demande à myAjax.php lorsque l'utilisateur clique sur un lien. Le serveur générera du contenu, dans ce cas "hello world!". Nous allons insérer l'élément HTML avec l'id output.

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

Le code HTML 

<a href="#" onclick="return getOutput();"> test </a>
<div id="output">waiting for action</div>

Le PHP 

// file myAjax.php
<?php
  echo 'hello world!';
?>

Essayez-le: http://jsfiddle.net/GRMule/m8CTk/

Avec une bibliothèque javascript (jQuery et al)

On peut dire que c'est beaucoup de code Javascript. Vous pouvez raccourcir cela en resserrant les blocs ou en utilisant des opérateurs logiques plus concis, bien sûr, mais il reste encore beaucoup à faire. Si vous envisagez de faire beaucoup de ce genre de choses sur votre projet, vous aurez peut-être intérêt à utiliser une bibliothèque javascript.

En utilisant les mêmes HTML et PHP d'en haut, il s'agit de l'ensemble de votre script (jQuery inclus sur la page). J'ai un peu resserré le code pour être plus cohérent avec le style général de jQuery, mais vous avez une idée:

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

Essayez-le: http://jsfiddle.net/GRMule/WQXXT/

Ne vous précipitez pas pour jQuery pour l'instant: ajouter n'importe quelle bibliothèque ajoute encore des centaines ou des milliers de lignes de code à votre projet, tout aussi sûrement que si vous les aviez écrites. Dans le fichier de bibliothèque jQuery, vous trouverez un code similaire à celui du premier exemple, plus un beaucoup plus . Cela peut être une bonne chose, peut-être pas. Planifiez et prenez en compte la taille actuelle de votre projet et les possibilités futures d'extension, ainsi que l'environnement ou la plate-forme cible.

Si c'est tout ce que vous avez à faire, écrivez le javascript uni une fois et vous avez terminé.

Documentation

141
Chris Baker

PHP est évalué sur le serveur. javascript est évalué sur le client/navigateur, vous ne pouvez donc pas appeler une fonction PHP à partir de javascript directement. Mais vous pouvez envoyer une requête HTTP au serveur qui activera une fonction PHP, avec AJAX.

15
Dor

AJAX est le seul moyen d’exécuter PHP à partir de JS. Vous pouvez envoyer des données au serveur (par exemple, GET /ajax.php?do=someFunction) puis dans ajax.php vous écrivez:

function someFunction() {
    echo 'Answer';
}

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

et ensuite, attrapez la réponse avec JS (j'utilise jQuery pour faire des requêtes AJAX)

Vous aurez probablement besoin d'un format de réponse. Voir JSON ou XML, mais JSON est facile à utiliser avec JavaScript. Dans PHP, vous pouvez utiliser la fonction json_encode ($ array); qui obtient un tableau comme argument.

11
morsik

J'ai récemment publié un plugin jQuery qui vous permet d'effectuer des appels de fonction PHP de différentes manières: https://github.com/Xaxis/jquery.php

Exemple d'utilisation simple:

// 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/"]
2
Xaxis