Llamar a la función php desde JavaScript
¿Hay alguna manera 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.
Esto es, en esencia, para lo que sirve AJAX . 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 brinda un lugar para trabajar con esa salida, incluso simplemente pegarlo en la página como cualquier otra pieza de HTML.
Puedes hacerlo "a mano" con Javascript simple 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 simple.
Javascript simple
En este ejemplo muy básico, enviamos una solicitud myAjax.phpcuando el usuario hace clic en un enlace. El servidor generará algún contenido, en este caso "¡hola mundo!". Lo colocaremos 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 javascript (jQuery et al)
Podría decirse que se trata de una gran cantidad de código Javascript. Puedes acortarlo apretando los bloques o usando operadores lógicos más concisos, por supuesto, pero todavía hay muchas cosas que hacer ahí. Si planeas hacer muchas cosas de este tipo en tu proyecto, es posible que 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 que sea más coherente con el estilo general de jQuery, pero ya 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 utilizar jQuery todavía: agregar cualquier biblioteca sigue agregando cientos o miles de líneas de código a su proyecto con la misma seguridad que si las hubiera escrito usted. Dentro del archivo de la biblioteca jQuery, encontrará un código similar al del primer ejemplo, y mucho más . Puede que eso sea 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 objetivo.
Si esto es todo lo que necesita hacer, escriba el javascript simple una vez y listo.
Documentación
- AJAX en MDN: https://developer.mozilla.org/en/ajax
XMLHttpRequesten MDN: https://developer.mozilla.org/en/XMLHttpRequestXMLHttpRequesten 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 se evalúa en el servidor; javascript se evalúa en el cliente/navegador, por lo que no se puede llamar directamente a una función PHP desde javascript . Pero puedes emitir una solicitud HTTP al servidor que activará una función PHP, con AJAX.
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, capta la respuesta con JS (estoy usando jQuery para realizar solicitudes AJAX)
Probablemente necesitarás algún formato de respuesta. Consulte JSON o XML, pero JSON es fácil de usar con JavaScript. En PHP puedes usar la función json_encode($array); que obtiene una matriz como argumento.
