Post en JQuery

chema1985 · #1 (**permalink**) 07/06/2015, 07:25

Hola compañeros, soy nuevo por el foro, hace como 2 semanas comencé a programar en PHP, y ahora me encuentro en una encrucijada de la que no se salir, tengo un script de js que enlaza con php, pero no me funciona, y me gustaría que me aconsejaran como hacerlo. Os muestro fragmentos del código.

Script js:

Código HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
                <script src="bootstrap/js/bootstrap.min.js"></script>
                <script src="js/index.js"></script>
                <script type="text/javascript">
                    $(function(){ 
                        $("#consultar").click(function(){
                            $("#grid").text("Consultando....");
                            $.post("socios.php", {action:"consultar"}, respuesta,'json');
                        });
                    });

                    function respuesta(arg){
                       $("#grid").html(arg.toSource());
                    };
                </script>

consultar es el id de un botón, y grid es el identificador de un div, El texto "Consultando..." Si que aparece en el div, es el post lo que no se hacer funcionar.

Aquí os dejo el código php:

Código PHP:

  $conexion = new Servidor_Base_Datos($servidor, $usuario, $pass, $base_datos);

    

    switch (@$_REQUEST['action']){

        case "consultar":

            $conexion->conectar_base_datos();

            $data =  $conexion->getAllRows("SELECT * FROM socios");

            $conexion->desconectar();    

            echo json_encode($data);  

            break;

        

    }

Espero esté claro mi problema y me puedan ayudar.

Eleazan · #2 (**permalink**) 07/06/2015, 09:19

Si utilizas chrome, puedes utilizar la consola de desarrollador (ctrl + shift + j) del navegador. Ahí, dentro de "network", podrás ver las diferentes peticiones que haces (jpg's, css's, js...), y si mientras la tienes activada, pinchas el el botón, verás si realizas (o no) la petición post.. (o en consola verás si hay algún error js!).

Al principio lía un poco, pero si aprendes a usarla, te irá muy bien!

Prueba a ver si llegas a realizar la llamada a socios.php.. y en caso de que la haga, mira si te da error o no, o que te devuelve directamente desde ahí ;)

Saludos!

chema1985 · #3 (**permalink**) 07/06/2015, 10:13

Gracias Eleazan por el comentario, soy tan novato en esto que no sabía ni que existiera esa ayuda en el navegador, parece que si que me hace el post, pero no lo manda al grid que es lo que quiero, se pone antes de comenzar el html y por eso no se ve.
¿Cómo puedo hacer para meterlo dentro <div id="grid"></div> ?

Código HTML:

[{"idSocios":"2","dni":"24","nombre":"24","apellido":"24","email":"24","telefono":"24"},{"idSocios":"3","dni":"111","nombre":"111","apellido":"111","email":"111","telefono":"111"},{"idSocios":"6","dni":"1","nombre":"1","apellido":"1","email":"1","telefono":"1"},{"idSocios":"9","dni":"25626262","nombre":"Perico","apellido":"Palotes","email":"[email protected]","telefono":"876567876"},{"idSocios":"10","dni":"123","nombre":"123","apellido":"123","email":"123","telefono":"123"},{"idSocios":"12","dni":"aaa","nombre":"aaa","apellido":"aaa","email":"aaa","telefono":"0"},{"idSocios":"13","dni":"a","nombre":"a","apellido":"a","email":"a","telefono":"0"},{"idSocios":"14","dni":"b","nombre":"b","apellido":"b","email":"b","telefono":"0"},{"idSocios":"16","dni":"c","nombre":"c","apellido":"c","email":"c","telefono":"0"},{"idSocios":"18","dni":"aa","nombre":"aa","apellido":"aa","email":"aa","telefono":"0"},{"idSocios":"19","dni":"bb","nombre":"bb","apellido":"bb","email":"bb","telefono":"0"}]
<!DOCTYPE HTML>
<html>
	<head>
            <title>Gestión del videoclub</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/estiloPrincipal.css" type="text/css">
                <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
                <script src="lib/bootstrap/js/bootstrap.min.js"></script>
                <script type="text/javascript">
                    $(function(){ 
                        $("#consultar").click(function(){
                            $("#grid").text("Consultando....");
                            $.post("socios.php", {action:"consultar"}, respuesta,'json');
                        });
                    });

                    function respuesta(arg){
                       $("#grid").html(arg.toSource());
                    };
                </script>

	</head>
	<body>
		<div class="wrapper">
			<div class="container">
				<!--<div class="header-logo"><img src="img/header.jpg"/></div>-->
				<div class="tabs">
				  <a href="socios.php"><div id="tabSocios" class="tab active">Socios</div></a>
                                  <a href="catalogo.php"><div class="tab">Catalogo</div></a>
                                  <a href="alquiler.php"><div class="tab">Alquiler</div></a>
                                  <a href="peliculasVenta.php"><div class="tab">Peliculas a la venta</div></a>
                                  <a href="directores.php"><div class="tab">Directores</div></a>
                                  <a href="categorias.php"><div class="tab">Categorias</div></a>
                                  <a href="proveedores.php"><div class="tab">Proveedores</div></a>
                                  
                                </div>
			</div>
		</div>
            <br>
            <input type="button" id="consultar" value="consultar">

            <div id="grid">
                
            </div>
            
            <div class="formulario">
                <form action="Metodossocios.php" method="post" name="formulario">
                    DNI: <input type="text" name="dni" required>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    Nombre: <input type="text" name="nombre">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    Apellidos: <input type="text" name="apellidos"><br>
                    Email: <input type="text" name="email">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    Telefono: <input type="text" name="telefono">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <input type="submit" name="botonGuardar" value="Guardar">
                </form>
            </div>
            
	</body>
        
            
</html>