pasar variables para funciones php desde javascript

Jro · #1 (**permalink**) 12/05/2009, 20:08

Hola yo estoy usando codeigniter para un juego sencillo y en una de mis vistas(views) trabajo todo el juego en javascript pero necesito guardar información del juego en php en una de mis clases controladoras necesito saber alguna forma de mandarle una variable a ese método php de algo javascript que recojo.

Agradezco cualquier ayuda...

anlhp · #2 (**permalink**) 13/05/2009, 04:57

crea un objeto XMLHttpRequest y envia a traves de el las variables a php y luego en php las recoges mediante $_GET o $_POST

Jro · #3 (**permalink**) 14/05/2009, 12:16

Gracias voy a probarlo, ahora tengo otra duda similar tengo en mi vista(usando codeigniter) un método en javascript pero necesito recoger en el un arreglo desde un método php que está en mi controladora podrías ayudarme con esto?
Gracias de antemano...

anlhp · #4 (**permalink**) 14/05/2009, 13:17

lo que estas necesitando es puro uso del objeto XMLHttpRequest (AJAX) porque claro, necesitas 'dinamicidad' en tu juego sin necesidad de hacer los 'mega pedidos' al servidor y perder el estado de todo, ahora mismo estoy saliendo del trabajo, pero cuando llegue a casa te mando un tutorial muy sencillo de como usar ajax y asi podras resolver todas tus dudas y crear cosas por tu cuenta

recuerda lo que dijo Confucius:
"Denle al hombre un pez y comera por un dia. Enseñen al hombre a pescar y comera siempre"

mirate el siguiente codigo y cualquier duda me dices:
son dos archivos
1- juego.php
2- script.php

juego.php le hara un pedido a script.php y luego con lo que este le responda creara un objeto, para esto utiliza la funcion mas poderosa de javascript eval()

script.php

Código PHP:

  $literal_objeto = <<<EOQ 
    objeto = { 
        mensaje: "Hola, fui creado en php pero vivo en javascript", 
        quesoy: "ObjetoPHP" 
    } 
EOQ; 
echo $literal_objeto;

juego.php

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta name="Content-Type" value=" text/html;charset=utf-8" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript">
	function Juego()
	{
		this.xhr = (function()
			{
				var tmp = new XMLHttpRequest();
				tmp.objetoPHP = null;
				tmp.getObjetoPHP = function()
					{
						this.open('get', 'script.php', true);
						this.send(null);
					}
				tmp.onreadystatechange = function()
					{
						if(this.readyState < 4)
							return;
						if(this.status != 200)
							alert("there wa an error ajax");
						this.objetoPHP = eval(this.responseText);
						$('#mensajes').append("Listo");
						$('#mensajes').append("<br />");
						$('#mensajes').append(this.objetoPHP.mensaje);
						$('#mensajes').append("<br />");
						$('#mensajes').append("Que soy?"+this.objetoPHP.quesoy);
						$('#mensajes').append("<br />");
						$('#mensajes').append("Mi codigo?"+this.responseText);
					}
				return tmp;
			})();
	}
	$(document).ready(function()
	{
		var juego = new Juego();
		juego.xhr.getObjetoPHP();
	});
</script>
</head>
<body>
<p id="mensajes">
</p>
</body>
</html>

como mismo digo crear un objeto, digo crear un array, pero un objeto lo veo mas elegante ;)
espero que te sirva

Cita:

Iniciado por anlhp

mirate el siguiente codigo y cualquier duda me dices:
son dos archivos
1- juego.php
2- script.php

juego.php le hara un pedido a script.php y luego con lo que este le responda creara un objeto, para esto utiliza la funcion mas poderosa de javascript eval()

script.php

Código PHP:

  $literal_objeto = <<<EOQ 
    objeto = { 
        mensaje: "Hola, fui creado en php pero vivo en javascript", 
        quesoy: "ObjetoPHP" 
    } 
EOQ; 
echo $literal_objeto;

juego.php

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta name="Content-Type" value=" text/html;charset=utf-8" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript">
	function Juego()
	{
		this.xhr = (function()
			{
				var tmp = new XMLHttpRequest();
				tmp.objetoPHP = null;
				tmp.getObjetoPHP = function()
					{
						this.open('get', 'script.php', true);
						this.send(null);
					}
				tmp.onreadystatechange = function()
					{
						if(this.readyState < 4)
							return;
						if(this.status != 200)
							alert("there wa an error ajax");
						this.objetoPHP = eval(this.responseText);
						$('#mensajes').append("Listo");
						$('#mensajes').append("<br />");
						$('#mensajes').append(this.objetoPHP.mensaje);
						$('#mensajes').append("<br />");
						$('#mensajes').append("Que soy?"+this.objetoPHP.quesoy);
						$('#mensajes').append("<br />");
						$('#mensajes').append("Mi codigo?"+this.responseText);
					}
				return tmp;
			})();
	}
	$(document).ready(function()
	{
		var juego = new Juego();
		juego.xhr.getObjetoPHP();
	});
</script>
</head>
<body>
<p id="mensajes">
</p>
</body>
</html>

como mismo digo crear un objeto, digo crear un array, pero un objeto lo veo mas elegante ;)
espero que te sirva

por cierto se me olvido comentarte, en el codigo javascript creo el objeto XMLHttpRequest directamente para ahorrarme tiempo pues tuve que escribir todo esto ahora, pero la que internet explorer anterior al 7 se crea como un objeto ActiveX, investiga sobre el asunto que al final veras que no podras vivir sin javascript

Jro · #5 (**permalink**) 14/05/2009, 14:42

Entiendo la lógica general de lo que me mandaste pero es que no sé como aplicarlo a este caso, como vez aqui yo en mi controlador devuelvo un arreglo que contendrá las posiciones en mi tablero y las fichas que la ocupan pero mi vista javascript no reconoce este arreglo. Cómo podría aplicarlo a este caso.
Disculpa las molestias tan continuas
gracias

//en mi controlador

public function devolver_tablero()
{/*
$partida_id = 1; //esto es temporal

$this->load->model('Modelo');
$query = $this->Modelo->get_tablero($partida_id);
$fichas = array();
$pos_fichas = array();

$algo = $query->result_array();

for($i=0;$i<count($algo);$i++)
{
$fichas[] = $algo[$i]['ficha'];
$pos_fichas[] = $algo[$i]['pos_ficha'];
}
*/

$fichas = array();
$pos_fichas = array();

$fichas[]=3;
$fichas[]=5;
$pos_fichas[]=20;
$pos_fichas[]=10;

$tablero = array(100);

for($i=0;$i<100;$i++)
{
$tablero[$i] = null;
}

for($i=0;$i<count($fichas);$i++)
{
$tablero[$pos_fichas[$i]] = $fichas[$i];
}

return $tablero;
}

//en mi vista

<script type="text/javascript" language="javascript">

function comprobar()
{
<?php
$objeto = new Welcome();
$var = array(100);
$var = $objeto->devolver_tablero();
?>
var ruta = "<?php echo $var[20];?>"
alert(ruta);

}
</script>

anlhp · #6 (**permalink**) 14/05/2009, 16:40

ahora no entiendo, he probado tu codigo y me corre a la perfeccion

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
<?php
function tablero()
{
	$fichas = array();
	$pos_fichas = array();
	
	$fichas[] = 3;
	$fichas[] = 5;
	
	$pos_fichas[] = 20;
	$pos_fichas[] = 10;
	
	$tablero = array();
	for($i = 0; $i < count($fichas); $i++)
	{
		$tablero[$pos_fichas[$i]] = $fichas[$i];	
	}
	
	return $tablero;
}
$var = tablero();
?>
		<script type="text/javascript">
			var a = "<?php	echo $var[20];?>";
			alert(a);//me alerta "3"		
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

ahora, si lo que quieres es tener un arreglo en javascript equivalente a tu arreglo de php pues si que tienes que devolver una cadena desde php que al pasarla al interprete javascript por medio de la funcion eval() te cree un arreglo como el de php, pero en javascript, ya que no existe otra manera de decirle a javascript: eh! el arreglo este de php, guardalo, porque recuerda que la pagina primero se procesa en el servidor, es decir, php hace todo lo que tenga que hacer con la pagina y luego la devuelve como puro texto plano y ya el navegador se encarga de 'interpretar' y de alguna manera 'compilar' ese texto plano, por lo que no existe una manera de que ese texto guarde una referencia a una variable creada en un instante determinado en el servidor
si es esto lo que quieres hacer dime y te pongo un ejemplo
saludos

pateketrueke · #7 (**permalink**) 14/05/2009, 17:15

se puede hacer con JSON
http://json.org/json-es.html

Código PHP:

  <?php

$foo = array(
  'candy' => 'bar'
);

?>

...

<script type="text/javascript">
var a = eval("((<?php echo json_encode(get_defined_vars()); ?>))");

alert(a);
</script>

Jro · #8 (**permalink**) 15/05/2009, 08:14

anlhp eso es más o menos lo que quiero hacer recoger ese arreglo de php y poder usarlo en javascript si no es mucha molestia te agradecería un ejemplo de esto.

pateketrueke aún no he probado lo que me dijiste voy a probarlo y te digo.

J'

anlhp · #9 (**permalink**) 15/05/2009, 09:15

primera forma y utilizando lo que dijo pateketrueke, esta funcion de php te devuelve el equivalente en notacion json del arreglo de php(muy util si tienes que hacer mas cosas con dicho arreglo, no solo pasarselo a javascript)
asi quedaria

script.php

Código PHP:

  function getTablero() 
{ 
    $fichas = array(); 
    $pos_fichas = array(); 
     
    $fichas[] = 3; 
    $fichas[] = 5; 
     
    $pos_fichas[] = 20; 
    $pos_fichas[] = 10; 
     
    $tablero = array(); 
    for($i = 0; $i < count($fichas); $i++) 
    { 
     
        $tablero[$pos_fichas[$i]] = $fichas[$i];     
         
    } 
     
    return $tablero; 
} 
 
function convertirTablero($tablero) 
{ 
    return json_encode($tablero); 
}

pagina.html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<?php
		require_once 'script.php';
		$tablero = getTablero();
		?>
		<script type="text/javascript">
			var tablero = eval(<?php echo convertirTablero($tablero);?>);
			alert(typeof tablero); //ALERTA 'OBJECT'
                        alert(tablero.20);//DA ERROR;
                        alert(tablero[20]);//ALERTA 3	
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

de esta forma no tendras un arreglo en javascript sino un objeto cuyas propiedades son las claves del arreglo de php y los valores de cada clave pues los correspondientes al arreglo de php

segunda forma
script.php

Código PHP:

  function getTablero() 
{ 
    $fichas = array(); 
    $pos_fichas = array(); 
     
    $fichas[] = 3; 
    $fichas[] = 5; 
     
    $pos_fichas[] = 20; 
    $pos_fichas[] = 10; 
     
    $tablero = array(); 
    for($i = 0; $i < count($fichas); $i++) 
    { 
     
        $tablero[$pos_fichas[$i]] = $fichas[$i];     
         
    } 
     
    return $tablero; 
} 
 
function convertirTablero($tablero) 
{ 
    return json_encode($tablero); 
} 
 
function getArrayTablero($tablero_php) 
{ 
    $tablero_js = 'var tablero = [];'; 
    foreach($tablero_php as $key=>$value) 
    { 
        $tablero_js .= 'tablero['.$key.'] = "'.$value.'";';     
    } 
     
    return $tablero_js; 
}

hemos añandido una tercera funcion que devolvera la cadena de un array javascript
luego
pagina.html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<?php
		require_once 'script.php';
		$tablero = getTablero();
		?>
		<script type="text/javascript">
			eval('<?php echo getArrayTablero($tablero);?>');
			alert(typeof tablero);//ALERTA OBJETO PORQUE LOS ARRAYS EN
                                                      //JAVASCRIPT SON DE HECHO, OBJETOS
                        alert(tablero[20]);//ALERTA 3
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

por tanto que forma es la mejor? pues yo creo que la primera, te ahorras la creacion de una funcion ya que mires por donde lo mires, el arreglo que pasaras de php a javascript, este ultimo lo mirara como un objeto pero lo podras tratar siempre como un arreglo
cualquier preguntilla ya sabes ;)

Jro · #10 (**permalink**) 20/05/2009, 09:50

Gracias anlhp he comenzado a utilizar Ajax para casi todo y como resultado ya tengo dinamismo en el sitio y dos jugadores son capaces de ver el mismo tablero tan rápido como uno de ellos coloca una ficha, de esta manera es multijugador. Tuve que adaptar algunas cosas pero hasta ahora corre a la perfección.

Gracias a ti y a pateketrueke...pronto traeré más dudas.
J'