!Ayuda, ajax no funciona,en express.js

.rn3w. · 29 Agosto 2016, 00:06 AM

Código (html4strict) [Seleccionar]



<!DOCTYPE html>
<html>
<head>
 <title>login</title>
<script src="jquery-3.1.0.js" type="text/javascript"></script>
</head>
<body>
   
    <form class="formulario">
     <p><input type="text "id="clickme"  value="n o m b r e"></p>
     <p><input type="text "id="pass"  value=" c o n t r a s e n a"></p>
     <input type="submit" id="botonEnviar" value="enviar">
        </form>
    




<script>
    var id="idUsuario";
    $('.formulario').submit(function(event) {
        form_submit();    
        return false;
    });

function form_submit() {
    var request = $.ajax({
        url: 'login.php',
        type: 'POST',
        data: {
            keystrokes : id
        },
        dataType: 'json',
        contentType:'application/json',
    });

    request.done(function(response) {
        alert((response.status ? "Success: " : "Error: ") + response.message);
        if(response.status) {
            window.location.href = 'login.php';
        }
        else {
            window.location.href = '';
        }
    });
    
    request.fail(function(jqXHR, textStatus) {
        alert("Server request failed: " + textStatus);
        window.location.href = '';
    });

    request.error(function(result, sts,err) {
        alert(err+":"+sts);
        
    });
}
    </script>
</body>
</html>

Código (php) [Seleccionar]

<?php

$resultado = $_POST['keystrokes']; 
echo $resultado;

?>

el error que me sale es parseerror, como lo soluciono ?

.rn3w. · 29 Agosto 2016, 01:21 AM

el error que sale es "server request failed parseerror", ayuda no soy muy bueno con desarrollo web

saludos...

#!drvy · 29 Agosto 2016, 08:57 AM

Cuando declaras dataType y contentType en el AJAX de jQuery, te debes asegurar tanto de enviar los datos en el formato correcto, como de recibirlos de dicha forma.

En este caso, declaras que lo que estas enviando es JSON y lo que esperas recibir es también JSON. PHP sin embargo responde de forma pura y ademas te tira un error porque ese parámetro no es reconocible para PHP (envías una cadena JSON la cual PHP no puede tratar). PHP no conoce esa forma de recibir datos. Lo mejor que puedes hacer es quitar el contentType:'application/json', de tu código para que detecte automáticamente el formato por el que mandarlo.

Si lo quitas, PHP reconocerá como POST las variables que mandes y podrás usar el array iterator para obtener el valor de keystrokes.

Para devolverlo, lo mismo, debes hablar el mismo idioma por el que te fue pedido.. lo debes devolver en JSON. La mejor forma seria:

Código (php) [Seleccionar]

header('Content-Type: application/json');
$resultado = ( is_array($resultado) ? $resultado : array($resultado) );
die(json_encode($resultado, true));

En la primera linea, le dices al navegador que lo que le vas a dar es contenido JSON.
En la segunda, te aseguras que $resultado es tratado como array para que json_encode funcione.
Y en la tercera, haces que el script "muera" devolviendo la variable $resultado como JSON.

Resumen:

- Quitamos la linea contentType del javascript.
- Cambiamos la forma en la que PHP devuelve el resultado para que jQuery lo trate bien y no le haga bullying.

Otras cosas a considerar:

- No uses .request.error() o al menos, no de esa forma. Es muy bruto. Usa solo .fail o asegúrate de que solo tire el alert() si realmente hay un error. La forma en la que esta puesto, tirara un alert() aunque no haya error.

- Para hacer debug correctamente quita las re direcciones y usa console.log()

- Deberías hacer que jQuery se cargue al final del body, igual que el resto de tu script.

Saludos

.rn3w. · 29 Agosto 2016, 16:18 PM

muchas gracias por responder, me ayudo mucho, pero aun sigue saliendo error "undefined" borre el contentType del javascript.

modifique el .php

Código (php) [Seleccionar]

<?php
header('Cache-Control: no-cache, must-revalidate');
header('Content-type: application/json');
$resultado = $_POST['keystrokes'];
  
$resultado = ( is_array($resultado) ? $resultado : array($resultado) );

die(json_encode($resultado, true));

?>

muchas gracias, espero que puedan ayudarme

.rn3w. · 29 Agosto 2016, 22:12 PM

ayuda, yo se que esto es simple para ustedes, pero a mi me esta costando mucho, no se que pasa, como solucionarlo

!!!Ayuda

WHK · 30 Agosto 2016, 03:16 AM

Hola amigo, te daré unos tips:

Cuando te aparezca un error fijate en que línea te aparece, por lo general los errores dicen el nombre del archivo mas el número de la línea, con eso te podrás dar mas cuenta del problema que debieras tener.

Código [Seleccionar]

if(response.status) {

Fijate que en una parte del código dice "response.status", realmente existe "status"?. PHP retorna un valor no? pues ese valor es un array o un objeto, en tu caso cuando envías la petición post desde tu javascript estás enviando el valor "keystrokes : id" y estás escribiendo el mismo resultado desde php, por lo tanto no tienes la variable "status" declarada en ningún lado, por eso dice undefined porque status no está definido.

"response" equivale a lo que php entregó, en este caso no es un objeto

Código [Seleccionar]

$resultado = ( is_array($resultado) ? $resultado : array($resultado) );
 die(json_encode($resultado, true));

Lo único que haces en es alínea es entregar el resultado como array. Digamos que $resultado equivale a "hola", entonces el resultado que entrega php queda así:

Código [Seleccionar]

["hola"]

Para solucionar esto, desde php debes crear la variable llamada status y otro donde lleve el valor que desees entregar, por ejemplo:

Código [Seleccionar]

die(json_encode(array('status' => 1, 'resultado' => $resultado)), true);

Entonces tendrás un resultado así:

Código [Seleccionar]

{ "status": 1, "resultado": "hola" }

Ahora desde javascript debes procesar "status" y también "resultado".

Prueba con esto:

Código (php) [Seleccionar]

<?php
if(isset($_POST) && isset($_POST['keystrokes'])){

    // Headers
    header('Content-Type: application/json');

    $resultado = (string)$_POST['keystrokes'];
    echo json_encode(array(
        'status' => 1,
        'result' => $resultado
    ), true);
    exit;
}
?><!DOCTYPE html>
<html>
    <head>
        <title>login</title>
        <script src="jquery-3.1.0.js" type="text/javascript"></script>
        <script type="text/javascript">
            
            var id = 'idUsuario';

            // Bind the form
            $('.formulario').submit(function(event) {

                // Prevent sent the form
                event.preventDefault();
                
                var request = $.ajax({
                    url  : 'login.php',
                    type : 'POST',
                    data : {
                        keystrokes : id
                    },
                    dataType    : 'json',
                    contentType :'application/json',
                });

                request.done(function(response) {

                    if(response.status) {
                        alert('Success: ' + response.message);
                        window.location.href = 'login.php';
                    }
                    else {
                        alert('Error: ' + response.message);
                        window.location.href = window.location.href;
                    }
                });

                request.fail(function(jqXHR, textStatus) {
                    alert("Server request failed: " + textStatus);
                    window.location.href = '';
                });

                request.error(function(result, sts,err) {
                    alert(err+":"+sts);

                });
            });
        </script>
    </head>
    <body>
        <form class="formulario">
            <p><input type="text "id="clickme"  value="n o m b r e"></p>
            <p><input type="text "id="pass"  value=" c o n t r a s e n a"></p>
            <input type="submit" id="botonEnviar" value="enviar">
        </form>
    </body>
</html>

Saludos.

flacc · 30 Agosto 2016, 04:47 AM

Yo seguiría las recomendaciones de los compañeros de mas arriba, ellos saben de lo que hablan, de todas formas cuéntanos como te va con el tema, y recuerda, te podemos guiar, pero tu debes alcanzar la meta.

Para entrar en detalles mas profundos con javascript, undefined es un estado (por decirlo de alguna forma) que puede aparecer por 2 razones:

La variable fue declarada (con var o con let) pero no inicializada.
Se intenta acceder a una variable que no a sido declarada.

Cuando undefined aparece porque la variable no fue inicializada el error debiera ser de referencia (ReferenceError, que es capturable con try catch), por otra parte, cuando se intenta acceder a una variable no definida (valga la redundancia), javascript nos notifica que la variable no existe con undefined (indefinida).

Ahora bien, cuando evaluamos expresiones con undefined se comporta de la siguiente manera:

Para cosas con números dirá que no es un número (NaN)
En expresiones booleanas será un false.

De acuerdo a lo que comento, podemos realizar las siguientes operaciones con variables y undefined:

Código (javascript) [Seleccionar]


// definida pero no inicializada
var variable;

if (variable) // la variable es undefined, la evaluamos como booleana y se comporta como false
  // codigo que nunca se ejecuta

if (otraVariable) // variable no definida, por lo tanto tambien es undefined y se comportara como false
  // codigo que nunca se ejecuta

if (variable === undefined) // variable no definida es igual a undefined usando la coomparacion por tipos
   // codigo que nunca se ejecuta

if (variable ==  undefined) // funciona tambien para comparaciones simples
  // codigo qeu nunca se ejecuta

// tambien se puede obtener el tipo de undefined como string y compararlo
if (typeof variable == 'undefined') // typeof devuelve el tipo de variable (undefined) como string
  // codigo que nunca se ejecuta

Bien, creo que lo he explicado relativamente entendible, ahora bien, el tema de undefined también se aplica a los arreglos con sub incides no definidos, y una cosa muy importante a la hora de jugar con esto, es que undefined es asignable (entre comillas).

Código (javascript) [Seleccionar]


var arreglo = [1];

console.log( arreglo[1] ); // el sub indice 0 existe, pero el sub indice 1 no, por lo tanto mostrara undefined

var algo = arreglo[1]; // esta es una curiosidad que no puedo explicar
/*
 * No lo he investigado, pueden ser 2 cosas, primero que como es undefined, la variable algo no se va a inicializar con undefined,
 * ciertamente el compilador obtimiza varias cosas en el background, pero no se si asignará undefined a una variable que ya es undefined.
 * Sería bueno que sepa que pasa ahí lo explicara.
 */

Espero te sirva la explicación de undefined.

Saludos

.rn3w. · 30 Agosto 2016, 06:44 AM

hice algunos cambios

Citar- Deberías hacer que jQuery se cargue al final del body, igual que el resto de tu script.

en el js

Código [Seleccionar]

$(window).on('load', function() {

y en ves de type lo puse method

Código [Seleccionar]

method : 'POST',

y funciono gracias amigos, en realidad muchas gracias

.rn3w. · 30 Agosto 2016, 23:52 PM

ahora estoy intentado implementar ajax en express.js
este es el layout.jade

Código (html4strict) [Seleccionar]


doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src="/javascripts/jquery-1.9.1.js")
    script(type="text/javascript", src='/javascripts/forMain-Script.js')
  body
    block content

mi formulario

Código (html4strict) [Seleccionar]

extends layout
 
block content
    h1= title
    form(id="formulario")
        div.input
            span.label Description
            textarea(name="description", cols="100", rows="3")
        div.actions
            input(id="botonEnviar",type="submit", value="enviar")

este es mi js

Código (javascript) [Seleccionar]


$(window).on('load', function() {   
   
   var id = 'idUsuario';
 
            $('#botonEnviar').click(function(event) {    
 
                event.preventDefault();
 
                var request = $.ajax({
     method : 'POST',
                    url    : 'http://localhost:3000/servidor',                    
                    data   : {
                        keystrokes : id
                    },
                    dataType    : 'json'
                });
 
                request.done(function(response) { 
                    if(response.status) {
                        alert('Success: ' + response.result + "\n Message: " + response.message);
                        window.location.href = 'http://localhost:3000/servidor';
                    }
                    else {
                        alert('Error: ' + response.message);
                        window.location.href = window.location.href;
                    }
                });
 
                request.fail(function(jqXHR, textStatus) {
                    alert("Server request failed: " + textStatus);
                    window.location.href = '';
                });
            });
   
  });

y en mi app.js puse este codigo que encontre en https://gist.github.com/diorahman/1520485

Código (javascript) [Seleccionar]

app.post('/servidor', function(req, res){
  var obj = {};
  console.log('body: ' + JSON.stringify(req.body));
  res.send(req.body);
});


app.listen(3000);

me sale error 404 por consola, y por alert sale error

en el app.js siento que es el error, ayuda!!!

.rn3w. · 31 Agosto 2016, 03:47 AM

el app.js modifique de la siguiente manera

Código [Seleccionar]

app.get('/', function (req, res){

   res.render('ajax.ejs');

});

app.post('/servidor', express.bodyParser(), function (req, res){

   console.log(req);
   console.log('req received');
   res.redirect('/');

});

pero aun no funciona,