Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: bengy en 29 Agosto 2016, 00:06 am


Título: !Ayuda, ajax no funciona,en express.js
Publicado por: bengy en 29 Agosto 2016, 00:06 am
Código
  1.  
  2. <!DOCTYPE html>
  5. 	<title>login</title>
  6. <script src="jquery-3.1.0.js" type="text/javascript"></script>
  7. </head>
  9.  
  10.     <form class="formulario">
  11.     	<p><input type="text "id="clickme"  value="n o m b r e"></p>
  12.     	<p><input type="text "id="pass"  value=" c o n t r a s e n a"></p>
  13.     	<input type="submit" id="botonEnviar" value="enviar">
  14.         </form>
  15.  
  16.  
  17.  
  18.  
  19.  
  21.     var id="idUsuario";
  22.     $('.formulario').submit(function(event) {
  23.         form_submit();    
  24.         return false;
  25.     });
  26.  
  27. function form_submit() {
  28.     var request = $.ajax({
  29.         url: 'login.php',
  30.         type: 'POST',
  31.         data: {
  32.             keystrokes : id
  33.         },
  34.         dataType: 'json',
  35.         contentType:'application/json',
  36.     });
  37.  
  38.     request.done(function(response) {
  39.         alert((response.status ? "Success: " : "Error: ") + response.message);
  40.         if(response.status) {
  41.             window.location.href = 'login.php';
  42.         }
  43.         else {
  44.             window.location.href = '';
  45.         }
  46.     });
  47.  
  48.     request.fail(function(jqXHR, textStatus) {
  49.         alert("Server request failed: " + textStatus);
  50.         window.location.href = '';
  51.     });
  52.  
  53.     request.error(function(result, sts,err) {
  54.         alert(err+":"+sts);
  55.  
  56.     });
  57. }
  58.     </script>
  59. </body>
  60. </html>
  61.  


Código
  1. <?php
  2.  
  3. $resultado = $_POST['keystrokes']; 
  4. echo $resultado;
  5.  
  6. ?>


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

Título: Re: ajax no funciona, ayuda porfavor
Publicado por: bengy en 29 Agosto 2016, 01:21 am
el error que sale es "server request failed parseerror", ayuda no soy muy bueno con desarrollo web

saludos...

Título: Re: ajax no funciona, ayuda porfavor
Publicado por: #!drvy en 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
  1. header('Content-Type: application/json');
  2. $resultado = ( is_array($resultado) ? $resultado : array($resultado) );
  3. 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

Título: Re: ajax no funciona, ayuda porfavor
Publicado por: bengy en 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
  1. <?php
  2. header('Cache-Control: no-cache, must-revalidate');
  3. header('Content-type: application/json');
  4. $resultado = $_POST['keystrokes'];
  5.  
  6. $resultado = ( is_array($resultado) ? $resultado : array($resultado) );
  7.  
  8. die(json_encode($resultado, true));
  9.  
  10. ?>


muchas gracias, espero que puedan ayudarme

Título: Re: ajax no funciona, ayuda porfavor
Publicado por: bengy en 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

Título: Re: ajax no funciona, ayuda porfavor
Publicado por: WHK en 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:
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:
$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:
["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:
die(json_encode(array('status' => 1, 'resultado' => $resultado)), true);

Entonces tendrás un resultado así:

Código:
{ "status": 1, "resultado": "hola" }

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

Prueba con esto:

Código
  1. <?php
  2. if(isset($_POST) && isset($_POST['keystrokes'])){
  3.  
  4.     // Headers
  5.     header('Content-Type: application/json');
  6.  
  7.     $resultado = (string)$_POST['keystrokes'];
  8.     echo json_encode(array(
  9.         'status' => 1,
  10.         'result' => $resultado
  11.     ), true);
  12.     exit;
  13. }
  14. ?><!DOCTYPE html>
  15. <html>
  16.     <head>
  17.         <title>login</title>
  18.         <script src="jquery-3.1.0.js" type="text/javascript"></script>
  19.         <script type="text/javascript">
  20.  
  21.             var id = 'idUsuario';
  22.  
  23.             // Bind the form
  24.             $('.formulario').submit(function(event) {
  25.  
  26.                 // Prevent sent the form
  27.                 event.preventDefault();
  28.  
  29.                 var request = $.ajax({
  30.                     url  : 'login.php',
  31.                     type : 'POST',
  32.                     data : {
  33.                         keystrokes : id
  34.                     },
  35.                     dataType    : 'json',
  36.                     contentType :'application/json',
  37.                 });
  38.  
  39.                 request.done(function(response) {
  40.  
  41.                     if(response.status) {
  42.                         alert('Success: ' + response.message);
  43.                         window.location.href = 'login.php';
  44.                     }
  45.                     else {
  46.                         alert('Error: ' + response.message);
  47.                         window.location.href = window.location.href;
  48.                     }
  49.                 });
  50.  
  51.                 request.fail(function(jqXHR, textStatus) {
  52.                     alert("Server request failed: " + textStatus);
  53.                     window.location.href = '';
  54.                 });
  55.  
  56.                 request.error(function(result, sts,err) {
  57.                     alert(err+":"+sts);
  58.  
  59.                 });
  60.             });
  61.         </script>
  62.     </head>
  63.     <body>
  64.         <form class="formulario">
  65.             <p><input type="text "id="clickme"  value="n o m b r e"></p>
  66.             <p><input type="text "id="pass"  value=" c o n t r a s e n a"></p>
  67.             <input type="submit" id="botonEnviar" value="enviar">
  68.         </form>
  69.     </body>
  70. </html>

Saludos.

Título: Re: ajax no funciona, ayuda porfavor
Publicado por: flacc en 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
  1. // definida pero no inicializada
  2. var variable;
  3.  
  4. if (variable) // la variable es undefined, la evaluamos como booleana y se comporta como false
  5.   // codigo que nunca se ejecuta
  6.  
  7. if (otraVariable) // variable no definida, por lo tanto tambien es undefined y se comportara como false
  8.   // codigo que nunca se ejecuta
  9.  
  10. if (variable === undefined) // variable no definida es igual a undefined usando la coomparacion por tipos
  11.    // codigo que nunca se ejecuta
  12.  
  13. if (variable ==  undefined) // funciona tambien para comparaciones simples
  14.   // codigo qeu nunca se ejecuta
  15.  
  16. // tambien se puede obtener el tipo de undefined como string y compararlo
  17. if (typeof variable == 'undefined') // typeof devuelve el tipo de variable (undefined) como string
  18.   // codigo que nunca se ejecuta
  19.  


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
  1. var arreglo = [1];
  2.  
  3. console.log( arreglo[1] ); // el sub indice 0 existe, pero el sub indice 1 no, por lo tanto mostrara undefined
  4.  
  5. var algo = arreglo[1]; // esta es una curiosidad que no puedo explicar
  6. /*
  7.  * No lo he investigado, pueden ser 2 cosas, primero que como es undefined, la variable algo no se va a inicializar con undefined,
  8.  * ciertamente el compilador obtimiza varias cosas en el background, pero no se si asignará undefined a una variable que ya es undefined.
  9.  * Sería bueno que sepa que pasa ahí lo explicara.
  10.  */
  11.  

Espero te sirva la explicación de undefined.

Saludos

Título: Re: ajax no funciona, ayuda porfavor
Publicado por: bengy en 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:
$(window).on('load', function() {

y en ves de type lo puse method

Código:
method : 'POST',

y funciono gracias amigos, en realidad muchas gracias

Título: Re: ajax no funciona, ayuda porfavor
Publicado por: bengy en 30 Agosto 2016, 23:52 pm
ahora estoy intentado implementar ajax en express.js
este es el layout.jade
Código
  1. doctype html
  2. html
  3.   head
  4.     title= title
  5.     link(rel='stylesheet', href='/stylesheets/style.css')
  6.     script(src="/javascripts/jquery-1.9.1.js")
  7.     script(type="text/javascript", src='/javascripts/forMain-Script.js')
  8.   body
  9.     block content
  10.  


mi formulario
Código
  1. extends layout
  2.  
  3. block content
  4.     h1= title
  5.     form(id="formulario")
  6.         div.input
  7.             span.label Description
  8.             textarea(name="description", cols="100", rows="3")
  9.         div.actions
  10.             input(id="botonEnviar",type="submit", value="enviar")


este es mi js
Código
  1. $(window).on('load', function() {			
  2.  
  3. 			var id = 'idUsuario';
  4.  
  5.             $('#botonEnviar').click(function(event) {				
  6.  
  7.                 event.preventDefault();
  8.  
  9.                 var request = $.ajax({
  10. 					method : 'POST',
  11.                     url    : 'http://localhost:3000/servidor',                    
  12.                     data   : {
  13.                         keystrokes : id
  14.                     },
  15.                     dataType    : 'json'
  16.                 });
  17.  
  18.                 request.done(function(response) { 
  19.                     if(response.status) {
  20.                         alert('Success: ' + response.result + "\n Message: " + response.message);
  21.                         window.location.href = 'http://localhost:3000/servidor';
  22.                     }
  23.                     else {
  24.                         alert('Error: ' + response.message);
  25.                         window.location.href = window.location.href;
  26.                     }
  27.                 });
  28.  
  29.                 request.fail(function(jqXHR, textStatus) {
  30.                     alert("Server request failed: " + textStatus);
  31.                     window.location.href = '';
  32.                 });
  33.             });
  34.  
  35. 		});


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

Código
  1. app.post('/servidor', function(req, res){
  2.   var obj = {};
  3.   console.log('body: ' + JSON.stringify(req.body));
  4.   res.send(req.body);
  5. });
  6.  
  7.  
  8. app.listen(3000);


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

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

Título: Re: !Ayuda, ajax no funciona,en express.js
Publicado por: bengy en 31 Agosto 2016, 03:47 am
el app.js modifique de la siguiente manera

Código:
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,

Título: Re: !Ayuda, ajax no funciona,en express.js
Publicado por: bengy en 1 Septiembre 2016, 02:28 am
me respondo a mi mismo, modifique el archivo app.js

Código:
app.post('/servidor', function(req,res){
    var status=1;
    var result=req.body.keystrokes;
    var message="todo bien";
     console.log(status);
    res.send(status + ' ' + result + ' ' + message);
});


las variables status, result,message son invocadas desde el js(ajax)

y funciono, saludos y muchas gracias por la ayuda


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines