no puedo mostrar la variable enviada desde ajax en la vista, ayuda
esta es mi estructura del proyecto
(https://s13.postimg.org/jsi8u284n/Sin_t_tulo.png) (https://postimg.org/image/gyf3gm5yb/)subir fotos (https://postimage.org/index.php?lang=spanish)
tengo el apps.js (servidor)
var express= require("express");
var routes = require('./routes/index');
var path = require('path');
var bodyParser=require("body-parser");
var app=express();
var video = require('./node_modules/node-svm/sample/sample');
app.set('view engine', 'jade');
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}));
app.get("/",function(req,res){
res.render("index");
});
app.post('/servidor', function(req,res){
var factDesdeAjax=req.body.fact;
console.log(req.body.fact);
res.render('index', { title: factDesdeAjax });
});
app.listen(3000);
tengo mi vista "index.jade"
extends layout
block content
h1= title
span.label no existe 1 rayo zapato zanahorea karaoke Whisky software wikipedia jinete japon jabon facil frio rayo yogur habil hablar galleta gigante gentil valiente vehiculo vegetariano quebrado quemado botella bandido brazil baile patata patria palabra marcial maqueta manantial caballero temperatura tercero ubicar urgente delfin delgado danza lectura laboratorio ilusivo inadvertencia ilimitado nacido narrado racionalidad radiactivo racismo satelite septiembre obstruir oscilatorio elogioso embajada emblema abundancia kiwi
p
li(class='hero-name')
a(href='#') #{hero}
h2 Facts
ul#facts
label(for="new-fact") Añadir nuevo fact:
textarea#new-fact
a(id='add-new-fact', href='#') Añadir
div#cnt
div#time
div#ult
div#especial
div#keydiferentes
div#keyMismos
div#keyCadaTecla
div#keyTeclasDerecho
div#keyTeclasIzquierdo
div#keyTeclasDerechoAdj
div#keyTeclasIzquierdoAdj
el layout
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/login.css')
script(src="/javascripts/jquery-1.9.1.js")
script(type="text/javascript", src='/javascripts/forMain-Script.js')
body
block content
tengo mi ajax
$(window).on('load', function() {
var id = 'idUsuario';
$('#add-new-fact').click(function() {
var fact = $('#new-fact').val();
$.ajax({
type: "POST",
url: "/servidor",
data: JSON.stringify({ fact: fact }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
$('<li>').appendTo('#facts').text(fact);
$('#new-fact').val('');
},
error: function(err) {
var msg = 'Status: ' + err.status + ': ' + err.responseText;
alert(msg);
}
});
return false;
});
});
lo que pretendo hacer es enviar datos desde ajax y mostrarlos en la vista, pero no se envía, es muy sencillo, me lo pueden revisar???
necesito ayuda porfavor !!! ayudaaaaaaaa
Da más información. ¿Qué ocurre con el ajax? ¿Llama al callback de error?
Con el navegador, firefox o chrome por ejemplo, haciendo click derecho -> Inspeccionar elemento, obtendrás una visión del tráfico de la red. Ahí puedes ver si se envía o no, a dónde se envía y qué respuesta tiene.
gracias por ayudar.
aumentando mas informacion, el ajax funciona bien, la variable fact del ajax llega hasta el servidor app.js
pero yo quiero enviar/mostrar esa variable en la vista index.jade,
nota index.jade esta arriba el codigo
aqui va mi codigo con el que pretendo enviar/mostrar la variable
app.post('/servidor', function(req,res){
var factor=req.body.fact;
res.render('index', { title: factor });
});
success: function(data) {
$('<li>').appendTo('#facts').text(fact);
$('#new-fact').val('');
},
¿No haces nada con los datos que te da el servidor?
solo muestro el valor capturado, lo subo a git hub, para que lo revisen mejor?
lo modifique el app.js
app.get('/server', function(req, res, next) {
res.render('index', { title: 'Registrosssssssssss de usuario' });
});
app.post('/servidor', function(req,res){
res.redirect('/server');
});
me sale este error
(https://s13.postimg.org/bkiu1ap87/Sin_t_tulo.png) (https://postimg.org/image/tnbwsil2r/)sube fotos (https://postimage.org/index.php?lang=spanish)
ya lo subi al git, espero que puedan ayudarme
https://github.com/rn3w/proyectoAjaxPost
Vale. Pusiste:
dataType: "json",
Enel AJAX. Eso es que la respuesta del servidor quieres que sea json. Si la respuesta no es json (que es lo que está ocurriendo), tira error.
Si quitas ese par clave-valor, debería funcionar.
creo que no me explique muy bien disculpas, lo que quiero hacer es enviar la variable title a la vista index.jade
Cita de: .rn3w. en 13 Septiembre 2016, 15:07 PM
solo muestro el valor capturado, lo subo a git hub, para que lo revisen mejor?
lo modifique el app.js
app.get('/server', function(req, res, next) {
res.render('index', { title: 'Registrosssssssssss de usuario' });
});
app.post('/servidor', function(req,res){
res.redirect('/server');
});
me sale este error
(https://s13.postimg.org/bkiu1ap87/Sin_t_tulo.png) (https://postimg.org/image/tnbwsil2r/)sube fotos (https://postimage.org/index.php?lang=spanish)
aqui va mi vista(el codigo completo de la vista esta arriba), como pueden ver aqui tengo mi variable title, ahi quiero que se muestre esto "'Registrosssssssssss de usuario'", solo para probar, por eso estoy haciendo esto: res.render('index', { title: 'Registrosssssssssss de usuario' });
block content
h1= title
span.label no existe 1 rayo zapato zanahorea karaoke Whisky software wikipedia jinete japon jabon facil frio rayo yogur habil hablar galleta gigante gentil valiente vehiculo vegetariano quebrado quemado botella bandido brazil baile patata patria palabra marcial maqueta manantial caballero temperatura tercero ubicar urgente delfin delgado danza lectura laboratorio ilusivo inadvertencia ilimitado nacido narrado racionalidad radiactivo racismo satelite septiembre obstruir oscilatorio elogioso embajada emblema abundancia kiwi
p
li(class='hero-name')pero aun sin funcionar, si pueden lo revisan el codigo completo esta en github https://github.com/rn3w/proyectoAjaxPost
o estoy equivocado___??? no es la manera de hacerlo??? en ese caso como lo harian_? ayuda porfavor
Cita de: .rn3w. en 13 Septiembre 2016, 15:07 PM
(https://s13.postimg.org/bkiu1ap87/Sin_t_tulo.png) (https://postimg.org/image/tnbwsil2r/)sube fotos (https://postimage.org/index.php?lang=spanish)
Cita de: ivancea96 en 13 Septiembre 2016, 16:19 PM
Vale. Pusiste:
dataType: "json",
En el AJAX. Eso es que la respuesta del servidor quieres que sea json. Si la respuesta no es json (que es lo que está ocurriendo), tira error.
Si quitas ese par clave-valor, debería funcionar.
¿No es ese el HTML final que quieres generar con la vista?
exacto, ese es el html en el que quiero mostrar la variable title, pero en vez de visualizarlo me muestra en un mensaje alert, como hacer para que se visualice?
pruebenlo https://github.com/rn3w/proyectoAjaxPost
Pero lee el mensaje que puse:
Cita de: ivancea96 en 13 Septiembre 2016, 16:19 PM
Vale. Pusiste:
dataType: "json",
En el AJAX. Eso es que la respuesta del servidor quieres que sea json. Si la respuesta no es json (que es lo que está ocurriendo), tira error.
Si quitas ese par clave-valor, debería funcionar.
Pusiste que sea JSON. Como la respuesta no es JSON, te va al error en el AJAX, y ahí es donde tienes el alert.
lo modifique asi
$(window).on('load', function() {
var id = 'idUsuario';
$('#add-new-fact').click(function() {
var fact = $('#new-fact').val();
$.ajax({
type: "POST",
url: "/servidor",
data: { fact: fact },
// contentType: "application/json; charset=utf-8",
// dataType: "json",
success: function(data) {
$('<li>').appendTo('#facts').text(fact);
$('#new-fact').val('');
},
error: function(err) {
var msg = 'Status: ' + err.status + ': ' + err.responseText;
alert(msg);
}
});
return false;
});
});
aun sigue sin mostrar la variable title
¿Ahora recibe el contenido en la función success? Eso es lo primero.
Y sí, antes sí que estaba la variable title correctamente metida:
(https://s13.postimg.org/bkiu1ap87/Sin_t_tulo.png)
¿No era ese el HTML que esperabas?
si ahora entra al succes!!! pero no visualiza la varialble title!!!
app.get('/server', function(req, res, next) {
res.render('index', { title: 'Registrosssssssssss de usuario' });
});
Citar¿No era ese el HTML que esperabas?
, si ese es pero no lo visualiza
me sale este error por consola
(https://s22.postimg.org/df228i68x/Sin_t_tulo.png) (https://postimg.org/image/7e4dbfjml/)subir fotos gratis (https://postimage.org/index.php?lang=spanish)
-¿Quieres que poner ese HTML en la página? Si es así, ¿por qué no hacer un formulario y un submit sin más?
-¿Quieres otra cosa? No entiendo qué es lo que quieres. Ya recibes lo que querías en el ajax. ¿Qué más?
disculpas, lo que quiero hacer es enviar la variable title a la vista index.jade
la variable title esta en el app.js y quiero mostrarlo en la vista index.jade
Cita de: .rn3w. en 13 Septiembre 2016, 16:36 PM
aqui va mi vista(el codigo completo de la vista esta arriba), como pueden ver aqui tengo mi variable title, ahi quiero que se muestre esto "'Registrosssssssssss de usuario'", solo para probar, por eso estoy haciendo esto: res.render('index', { title: 'Registrosssssssssss de usuario' });
block content
h1= title
span.label no existe 1 rayo zapato zanahorea karaoke Whisky software wikipedia jinete japon jabon facil frio rayo yogur habil hablar galleta gigante gentil valiente vehiculo vegetariano quebrado quemado botella bandido brazil baile patata patria palabra marcial maqueta manantial caballero temperatura tercero ubicar urgente delfin delgado danza lectura laboratorio ilusivo inadvertencia ilimitado nacido narrado racionalidad radiactivo racismo satelite septiembre obstruir oscilatorio elogioso embajada emblema abundancia kiwi
p
li(class='hero-name')
pero aun sin funcionar, si pueden lo revisan el codigo completo esta en github https://github.com/rn3w/proyectoAjaxPost
lo modifique el app.js y aqui tengo la variable "title" la cual QUIERO MOSTRAR EN LA VISTA INDEX.JADE
Código:
app.get('/server', function(req, res, next) {
res.render('index', { title: 'Registrosssssssssss de usuario' });
});
app.post('/servidor', function(req,res){
res.redirect('/server');
});NOTA:
app.post('/servidor', VIENE DESDE EL AJAX
Citar-¿Quieres que poner ese HTML en la página? Si es así, ¿por qué no hacer un formulario y un submit sin más?
YA TENGO ESE HTML QUE SE LLAMA INDEX.JADE, EN ESE INDEX.JADE TENGO
h1= title PARA MOSTRAR EL CONTENIDO DE LA VARIABLE TITLE ENVIADO DESDE APP.JS
ACA EL CODIGO https://github.com/rn3w/proyectoAjaxPost
EL CODIGO SOLO SON 5 ARCHIVOS, REVISENLO PORFAVOR
siguiendo este tutorial
https://www.uno-de-piera.com/rutas-y-plantillas-jade-en-node-js/
(https://s16.postimg.org/x4rnjfux1/Sin_t_tulo.png) (https://postimg.org/image/yjt885w01/)subir fotos online (https://postimage.org/index.php?lang=spanish)
intento hacer algo similar a la imagen, pero no funciona
extends layout
block content
h1= title
span.label no existe 1 rayo zapato zanahorea karaoke Whisky software wikipedia jinete japon jabon facil frio rayo yogur habil hablar galleta gigante gentil valiente vehiculo vegetariano quebrado quemado botella bandido brazil baile patata patria palabra marcial maqueta manantial caballero temperatura tercero ubicar urgente delfin delgado danza lectura laboratorio ilusivo inadvertencia ilimitado nacido narrado racionalidad radiactivo racismo satelite septiembre obstruir oscilatorio elogioso embajada emblema abundancia kiwi
p
li(class='hero-name')
a(href='#') #{hero}
h2 Facts
ul#facts
label(for="new-fact") Añadir nuevo fact:
textarea#new-fact
a(id='add-new-fact', href='#') Añadir
div#cnt
div#time
div#ult
div#especial
div#keydiferentes
div#keyMismos
div#keyCadaTecla
div#keyTeclasDerecho
div#keyTeclasIzquierdo
div#keyTeclasDerechoAdj
div#keyTeclasIzquierdoAdjCita de: ivancea96 en 13 Septiembre 2016, 20:29 PM
(https://s13.postimg.org/bkiu1ap87/Sin_t_tulo.png)
Ese HTML se genera a partir de tu vista, y tiene el title ahí puesto.
si, pero no se supone que deberia visualizarlo como una pagina? me ayudas a visualizarlo porfavor
No. AJAX hace la petición, y te da el resultado (el HTML). Es lo que hace el código, es todo correcto.
Si quieres abrir una página, te sería más sencillo hacerlo directamente con un form.
Si quieres mantener ese ajax de todos modos, puedes abrir el document y meterle los datos. Para ello, te redirijo a este ejemplo: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_open (http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_open)
Simplemente, pon dentro del write la respuesta del AJAX.
si o si tengo que mantener el ajax, te explico este proyecto aun es uno muy pero muy beta
asi que en ves de enviar desde ajax la variable fact tengo que enviar muchas variables, para lo cual usare json, con esas variables tengo que hacer alguna logica del negocio de mi proyecto y el resultado mostrarlo en la vista, por esa razon no puedo usar simplemente un formulario
probare el link que dejaste, muchas gracias en serio GRACIAS
es cierto, funciona, pero aun tengo una duda, por que funciona en el error ?
lo modifique asi el ajax y quedo asi:
$(window).on('load', function() {
var id = 'idUsuario';
$('#add-new-fact').click(function() {
var fact = $('#new-fact').val();
$.ajax({
type: "POST",
url: "/servidor",
data: { fact: fact },
// contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
alert("si");
$('<li>').appendTo('#facts').text(fact);
$('#new-fact').val('');
},
error: function(err) {
var msg = 'Status: ' + err.status + ': ' + err.responseText;
document.open("text/html", "replace");
document.write(err.responseText);
document.close();
}
});
return false;
});
});
no deberia funcionar en el success?
Comentaste lo que no era:
// contentType: "application/json; charset=utf-8",
dataType: "json",
Tienes que quitar el dataType.
contentType es el contenido que tú le envías.
dataType es lo que esperas recibir del servidor. Salvo que realmente lo necesites, no lo pongas. Que yo sepa, AJAX lo suele detectar automáticamente.
gracias amigo, muchas gracias