come enviar formularios de un chat php en ajax en un solo archivo

LuigBren · #1 (**permalink**) 11/04/2012, 20:14

Hola amigos, una consulta, estoy desarrollando un chat en php/mysql con funciones en ajax siguiendo tutoriales, el detalle es que todos los tutoriales usan varios archivos, ejemplo..

index.php - esqueleto donde muestra el contenido
enviar.php - sql envia mensajes db
mostrar.php - carga los mensajes de la db

y en ajax/javascript envia los datos al enviar.php para registrar los menajes ejemplo..

Código:

$('#send').click(function(){
		var user = $('#user').html();
		var mesg = $('#mesg').val();
		
		var dataString = 'user=' + user + '&mesg=' + mesg;	
		$.ajax({
			type: "POST",
			url: "sendmsg.php",
			data: dataString,
			success: function() {
				document.messgbox.mesgtextbox.value = "";
			}
		});		
});

pero yo quisiera usar 1 solo archivo y en el index.php tener todas las funciones intente de hacerlo de la siguiente manera..

Código:

$('#send').click(function(){
		var user = $('#user').html();
		var mesg = $('#mesg').val();
		
		var dataString = '?f=send&user=' + user + '&mesg=' + mesg;	
		$.ajax({
			type: "POST",
			url: "index.php",
			data: dataString,
			success: function() {
				document.messgbox.mesgtextbox.value = "";
			}
		});		
});

Código PHP:

  
<?php 
$funcion = $_GET["f"]; 
    if ($funcion=="send"){ 
            ................................ 
        } 
?>

en un chat que vi pero lo vi muy complejo para mis conocimientos usan el get de la siguiente manera

Código PHP:

  if ($_POST) { 
    if ($funcion== "send") { 
       ......................         
    }

pero no me funciona ninguna manera, alguna ayuda??

nota:el form que envia el mensaje tiene la propiedad onsubmit="return false", la pagina index.php no recarga..

sneyder05 · #2 (**permalink**) 12/04/2012, 08:14

Saludos LuigBren

Puedes crear 1 único archivo PHP y usar switch para saber que código ejecutar y que respuesta retornar al AJAX, prueba algo como esto:

1. Script PHP(chat.php)

Código PHP:

  <?php 
    if($_POST){ 
        $action = $_POST['action']; 
        if(!empty($action )){ 
            switch ($action){ 
                case "envia": 
                    //Aqui tu código PHP 
                break; 
                case "mostrar": 
                    //Aqui tu código PHP 
                break; 
            } 
        } 
    } 
?>

2. Script JS

Código PHP:

  $('#send').click(function(){ 
    var user = $('#user').html(); 
    var mesg = $('#mesg').val(); 
         
    var dataString = 'action=enviar&user=' + user + '&mesg=' + mesg;     
    $.ajax({ 
        type: "POST", 
        url: "chat.php", 
        data: dataString, 
        success: function() { 
            document.messgbox.mesgtextbox.value = ""; 
        } 
    });         
});

Nota como añadí otro parámetro más en la variable dataString, en este caso fué action=enviar, y que modifiqué la url del AJAX por chat.php.

Ahora puedes usar la misma estructura y cambiar el parámetro action de acuerdo a cada case que tengas en el switch

Pruébalo y nos comentas.

LuigBren · #3 (**permalink**) 12/04/2012, 12:12

Cita:

Iniciado por sneyder05

Saludos LuigBren

Puedes crear 1 único archivo PHP y usar switch para saber que código ejecutar y que respuesta retornar al AJAX, prueba algo como esto:

Nota como añadí otro parámetro más en la variable dataString, en este caso fué action=enviar, y que modifiqué la url del AJAX por chat.php.

Ahora puedes usar la misma estructura y cambiar el parámetro action de acuerdo a cada case que tengas en el switch

Pruébalo y nos comentas.

Gracias sneyder05, muy interesante tu idea, pero no me cuadra :( puede ser que estoy colocando mal las funciones, estoy probando en un archivo para verificar usuarios y siempre me dice no disponible.. te dejo el codigo de ejemplo que uso..

index.php

Código PHP:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<script src="jquery-1.7.1.min.js" type="text/javascript"></script> 
<script src="js.js" type="text/javascript"></script>     
</head> 
<body> 
<?php 
    if($_POST){ 
        $action = $_POST['action']; 
        if(!empty($action )){ 
            switch ($action){ 
                case "enviar": 
                    include("conex.php"); 
                    $nick = $_POST["nick"]; 
                    $consulta = mysql_query("select username FROM chat where username = '$nick'",$link); 
                    $numrows = mysql_num_rows($consulta); 
                    if ($numrows > 0) { 
                    echo 0; 
                    }else{ 
                    echo 1; 
                    } 
                break; 
                case "mostrar": 
                    //Aqui tu código PHP 
                break; 
            } 
        } 
    } 
?>  
<form id="frmRegistro" onsubmit="return false"> 
    <label> Nick: </label> 
    <input type="text" id="nick" name="nick" /> 
    <input type="submit" name="btonsend" id="btonsend" disabled="disabled" value="Enviar"/> 
    <div id="msgUsuario"></div> 
</form> 
</body> 
</html>

js.js

Código:

$(document).ready(function(){
	
$('#nick').focusout( function(){
    if($('#nick').val()!= ""){
		
     	var username = $('#nick').val();
		var dataString = 'action=enviar&nick=' + username;	
		
        $.ajax({
            type: "POST",
            url: "index.php",
            data: dataString,
            success: function( respuesta ){
              
			  if(respuesta == '1'){
                $('#msgUsuario').html("Disponible");
				$('#btonsend').removeAttr('disabled')
			  }else{
                $('#msgUsuario').html("No Disponible");
				$('#btonsend').attr('disabled','-1')	
			  }
			  
			}
        });
		
    }
});


});

En cambio si uso ese mismo ejemplo pero quitandole la opcion "action=enviar&" en el dataString y agreando la url del otro archivo.php url: "chequear.php" donde esta la misma consulta mysql para verificar el usuario que esta en el ejemplo si me funciona, que puede estar pasando? la pagina no recarga, no se si sera por eso..

sneyder05 · #4 (**permalink**) 12/04/2012, 12:42

Saludos LuigBren

Te aconsejaría que no mezclaras el HTML con el PHP, que tengas por separado el HTML(Vista) del PHP(Lógica).

Por otra parte no te va a funcionar porque tienes todo dentro de index.php y cuando haces el AJAX la respuesta sería:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Documento sin titulo</title>  
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>  
<script src="js.js" type="text/javascript"></script>      
</head>  
<body>  
0   
<form id="frmRegistro" onsubmit="return false">  
    <label> Nick: </label>  
    <input type="text" id="nick" name="nick" />  
    <input type="submit" name="btonsend" id="btonsend" disabled="disabled" value="Enviar"/>  
    <div id="msgUsuario"></div>  
</form>  
</body>  
</html>

Como puedes ver después de la etiqueta <body> está el resultado, en este caso un cero(0).

Ahora bien, si en verdad quieres tener todo en ese archivo debes ejecutar el script PHP antes de que se cree el HTML, así:

Código PHP:

  <?php  
    if($_POST){  
        $action = $_POST['action'];  
        if(!empty($action )){  
            switch ($action){  
                case "enviar":  
                    //Aqui tu código PHP 
                break;  
                case "mostrar":  
                    //Aqui tu código PHP  
                break;  
            }  
            die(); 
        }  
    }  
?>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
. 
. 
.

LuigBren · #5 (**permalink**) 12/04/2012, 13:11

Cita:

Iniciado por sneyder05

Saludos LuigBren
Ahora bien, si en verdad quieres tener todo en ese archivo debes ejecutar el script PHP antes de que se cree el HTML, así:

Código PHP:

  <?php  
    if($_POST){  
        $action = $_POST['action'];  
        if(!empty($action )){  
            switch ($action){  
                case "enviar":  
                    //Aqui tu código PHP 
                break;  
                case "mostrar":  
                    //Aqui tu código PHP  
                break;  
            }  
            die(); 
        }  
    }  
?>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
. 
. 
.

Graaaaaaaaaaaaaaaaaaaaaaaaaaciaaaassssssssssssss

Te lo agradesco sneyder05 mil gracias si me sirvio, al final de tanto cambiar lo tenia como me dijistes, codigo php al principio fuera del html pero no servia y luego de tu pronta respuesta vi que cambiastes el codigo y le agregastes die() y eso fue la solucion XD, tu primera respuesta fue correcta pero se te escapo el die(), nadie es perfecto XD, ya hoy aprendi algo nuevo!!!! saludos amigo....

sneyder05 · #6 (**permalink**) 12/04/2012, 13:16

Saludos LuigBren

Cita:

tu primera respuesta fue correcta pero se te escapo el die(), nadie es perfecto XD

Falso, no era correcta, ya que el die en ese caso detendría la ejecución, pero hasta ese punto ya se había creado parte del HTML, como el head.

Pero bueno que lo hayas solucionado y comprendido.

LuigBren · #7 (**permalink**) 12/04/2012, 15:53

Cita:

Iniciado por sneyder05

Saludos LuigBren

Falso, no era correcta, ya que el die en ese caso detendría la ejecución, pero hasta ese punto ya se había creado parte del HTML, como el head.

Pero bueno que lo hayas solucionado y comprendido.

oye disculpa si te molesto, tu codigo me sirvio, pero me frenem, tengo una duda, no se como describirlo para buscarlo en google ya que si busco por .load, es lo mismo que tengo, carga archivos externos no el miso, yo para leer los mensajes y algunos otros datos utilizo esta forma..

Código:

$(setInterval(function() {
	$('.chatbox').load('displaymsg.php');
	$('.boxonline').load('online.php');
	$('#check').load('check.php');
}, 500));

pero no hayo como hacer para cargar esas funciones en 1 solo archivo ya que no hay nada sobre post como el ejemplo anterior que envio informacion por formulario, gracias nuevamente..

------------------------------------------------------------------------------------------
Edito ya lo consegui!!!!!!!!!!!!!!!!!!!!!! por si alguien lo necesita lo hice de esta forma

Código:

$(document).ready(function(){
$(setInterval(function() {
	var accion = "mostrar";
	$(".caja").load('index.php',{action:accion});
}, 500));
});

donde acction es la variable que se declaro al hacer el switch y mostrar el valor de case, el ejemplo del siwtch esta arriba.. Saludos

Código:

index.php',{action:accion}