19 votos

Llama a la función php desde javascript

¿Hay alguna manera de que pueda 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 "Test" que llamaría a la función php.

45voto

Chris Puntos 20836

Esto es, en esencia, para lo que es AJAX. Tu página se carga, y añades un evento a un elemento. Cuando el usuario causa que el evento se dispare, digamos haciendo clic en algo, su Javascript utiliza el Objeto XMLHttpRequest para enviar una solicitud a un servidor.

Después de que el servidor responde (presumiblemente con la 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 otro pedazo de HTML.

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

Plain Javascript

En este ejemplo tan básico, enviamos una solicitud a myAjax.php cuando el usuario hace clic en un enlace. El servidor generará algún 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ébalo: http://jsfiddle.net/GRMule/m8CTk/

.

Con una biblioteca javascript (jQuery et al)

Podría decirse que es mucho código Javascript. Puedes acortar eso apretando los bloques o usando más operadores lógicos, por supuesto, pero todavía hay mucho que hacer. Si planeas hacer muchas cosas de este tipo en tu proyecto, tal vez sea mejor que tengas una biblioteca de 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 ser más consistente con el estilo general de jQuery, pero ya te haces una idea:

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

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

No te apresures a buscar jQuery todavía: agregar cualquier biblioteca es agregar cientos o miles de líneas de código a tu proyecto, tan seguro como si las hubieras escrito. Dentro del archivo de la biblioteca jQuery, encontrarás un código similar al del primer ejemplo, más un mucho más. Eso puede ser algo bueno, puede que no. Planifique y considere el tamaño actual de su proyecto y las posibilidades futuras de expansión, así como el entorno o plataforma objetivo.

Si esto es todo lo que necesitas hacer, escribe el javascript una vez y listo.

Documentación

4voto

Dor Puntos 3731

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

1voto

morsik Puntos 127

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

function someFunction() {
    echo 'Answer';
}

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

y luego, captar la respuesta con JS (estoy usando jQuery para hacer peticiones AJAX)

Probablemente necesitarás algún formato de respuesta. Ver JSON o XML, pero JSON es fácil de usar con JavaScript. En PHP puedes usar la función json_encode($array); la cual obtiene array como argumento.

-2voto

leopic Puntos 1434

Creo que debería utilizar un formulario o algún tipo de acción de envío para hacerlo, tenga en cuenta que al hacerlo transferirá al usuario a otra página, a menos que esté intentando hacerlo a través de AJAX.

-3voto

Xaxis Puntos 656

Recientemente publiqué un plugin jQuery que permite hacer llamadas a funciones PHP de varias maneras: https://github.com/Xaxis/jqueryphp

Un simple ejemplo de uso:

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X