Llamar a la función php desde JavaScript

80

¿Hay alguna forma de ejecutar una función php a través de una función JS?

algo como esto:

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

Básicamente, quiero ejecutar la función php query("hello"), cuando hago clic en el href llamado "Prueba" que llamaría a la función php.

Jason Russell
fuente
4
simplemente no, no hay forma de hacer esto, excepto llamar al método requerido usando ajax.
TheVillageIdiot
9
Ya sabes: PHP se ejecuta en el servidor, pero ¿JS en el cliente? Esto no puede funcionar de esta manera.
KingCrunch
espera espera, ¿no es <?php query("hello"); ?>representado por php cuando se carga la página? si es así, entonces puede obtener la salida de la query("hello")función js.
TheVillageIdiot
Sé que el código anterior es incorrecto, pero lo usé para mostrar lo que quiero
Jason Russell
1
posible duplicado de funciones
Mark Biek

Respuestas:

144

Esto es, en esencia, lo que AJAX es para . Su página se carga y agrega un evento a un elemento. Cuando el usuario hace que se active el evento, digamos al hacer clic en algo, su Javascript usa el objeto XMLHttpRequest para enviar una solicitud a un servidor.

Después de que el servidor responde (presumiblemente con salida), otra función / evento de Javascript le da un lugar para trabajar con esa salida, incluyendo simplemente pegarla en la página como cualquier otra pieza de HTML.

Puede hacerlo "a mano" con JavaScript simple, o puede usar jQuery. Dependiendo del tamaño de su proyecto y situación particular, puede ser más sencillo usar simplemente Javascript.

JavaScript simple

En este ejemplo muy básico, enviamos una solicitud myAjax.phpcuando el usuario hace clic en un enlace. El servidor generará contenido, en este caso "¡hola mundo!". Pondremos en el elemento HTML con el id output.

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

El HTML

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

El PHP

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

Pruébelo: http://jsfiddle.net/GRMule/m8CTk/


Con una biblioteca de JavaScript (jQuery et al)

Podría decirse que es mucho código Javascript. Puede acortarlo ajustando los bloques o usando operadores lógicos más concisos, por supuesto, pero todavía están sucediendo muchas cosas allí. Si planeas hacer mucho de este tipo de cosas en tu proyecto, es mejor que tengas una biblioteca javascript.

Usando el mismo HTML y PHP de arriba, este es su script completo (con jQuery incluido en la página). He ajustado un poco el código para que sea más coherente con el estilo general de jQuery, pero entiendes la idea:

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

Pruébelo: http://jsfiddle.net/GRMule/WQXXT/

No se apresure a buscar jQuery todavía: agregar cualquier biblioteca es agregar cientos o miles de líneas de código a su proyecto con la misma seguridad que si las hubiera escrito. Dentro del archivo de la biblioteca jQuery, encontrará un código similar al del primer ejemplo, además de mucho más . Eso puede ser algo bueno, puede que no. Planifique y considere el tamaño actual de su proyecto y la posibilidad futura de expansión y el entorno o plataforma de destino.

Si esto es todo lo que necesita hacer, escriba el javascript simple una vez y listo.

Documentación

Chris Baker
fuente
3
-1, media respuesta, OP preguntó cómo llamar a una función php desde javascript. Pou solo mostró cómo llamar a php PAGE. Debe agregar variables de publicación en la llamada ajax y php que verifica esas variables de publicación y luego llama a esa función php si existen esas variables de publicación.
MH
6
@Hanoncs Con casi infinitos arreglos posibles de código del lado del servidor, no es constructivo ni siquiera posible para mí adivinar qué arquitectura está usando el OP. Tampoco es relevante para la declaración del problema inmediato, ya que el OP no hace referencia a POST (o GET) o la necesidad de pasar valores. Creo que su voto negativo está fuera de lugar y no agregaré a mi respuesta especulaciones arbitrarias sobre un tema que no figura en el OP. Sin embargo, gracias por los comentarios.
Chris Baker
Cuando utilizo su código, obtengo un error debido al uso de "var" delante de la declaración de función. Eliminando "var" y funciona.
Jayden Lawson
16

PHP se evalúa en el servidor; javascript se evalúa en el cliente / navegador, por lo que no puede llamar a una función PHP desde javascript directamente . Pero puede emitir una solicitud HTTP al servidor que activará una función PHP, con AJAX.

Insecto
fuente
3
@Hanoncs: Esta es la respuesta. OP preguntó si puede ejecutar una función PHP a través de JS. La respuesta es: no puedes . Si le hubiera preguntado si puede emitir una solicitud HTTP que hará que el servidor web active un script PHP que ejecutará una función PHP, entonces sí, eso es posible. Pero él no pidió esto, ergo yo no escribo datos irrelevantes.
Dor
8
Jaja, vamos hombre, sabes que eso es lo que el OP quería decir con su pregunta. si supiera cómo explicarlo exactamente así, ya sabría cómo hacerlo.
MH
11

La única forma de ejecutar PHP desde JS es AJAX. Puede enviar datos al servidor (por ejemplo, GET /ajax.php?do=someFunction) y luego en ajax.php escribe:

function someFunction() {
    echo 'Answer';
}

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

y luego, capte la respuesta con JS (estoy usando jQuery para hacer solicitudes AJAX)

Probablemente necesitará algún formato de respuesta. Consulte JSON o XML, pero JSON es fácil de usar con JavaScript. En PHP puede usar la función json_encode ($ array); que obtiene una matriz como argumento.

morsik
fuente
3

Recientemente publiqué un complemento jQuery que le permite realizar llamadas a funciones PHP de varias maneras: https://github.com/Xaxis/jquery.php

Uso de ejemplo 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/"]
Xaxis
fuente
4
Aparte del sesgo obvio que tiene la gente con respecto a llamar a funciones PHP a través de JavaScript, explíqueme exactamente por qué mi respuesta ha sido rechazada tanto como lo ha hecho. Estoy respondiendo legítimamente a la pregunta en cuestión con una solución, ¿no es así?
Xaxis