Javascript express.js在加载视图后传递变量
我正在写一个聊天应用程序。首先,我通过Ajax加载了我的视图,但后来我意识到这是没有必要的,因为我可以在express insted中使用导出。我认为这是一个更好的解决方案,但我现在不知道如何将变量从登录表单传递到script.js。将rooms.js中的用户名(Javascript express.js在加载视图后传递变量,javascript,jquery,node.js,express,Javascript,Jquery,Node.js,Express,我正在写一个聊天应用程序。首先,我通过Ajax加载了我的视图,但后来我意识到这是没有必要的,因为我可以在express insted中使用导出。我认为这是一个更好的解决方案,但我现在不知道如何将变量从登录表单传递到script.js。将rooms.js中的用户名(username=req.body.user;)传递给server.js是有效的,因为我在控制台中有一个正确的名称,我在文本输入中键入了这个名称,但当我向script.js发送“test”时,什么都没有发生,我的浏览器控制台中什么都没有
username=req.body.user;
)传递给server.js是有效的,因为我在控制台中有一个正确的名称,我在文本输入中键入了这个名称,但当我向script.js发送“test”时,什么都没有发生,我的浏览器控制台中什么都没有。我猜想控制台中的消息会出现一会儿,然后加载新视图,使其消失。我试图改变代码的顺序,但没有帮助。有什么建议吗?我做错什么了吗?我刚刚开始学习node和express,因此我将非常感谢您的帮助
server.js
var express = require('express')
, routes = require('./routes')
, music = require('./routes/music')
, art = require('./routes/art')
, rooms = require('./routes/rooms')
, http = require('http')
, app = express()
, server = http.createServer(app)
, io = require('socket.io').listen(server)
, path = require('path')
, jade = require('jade')
, mysql = require('mysql');
app.configure(function() {
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));
app.use(express.bodyParser());
app.use(app.router);
});
app.get('/', routes.index);
app.get('/music', music.rooms);
app.get('/art', art.rooms);
app.post('/rooms', rooms.rooms);
io.sockets.on('connection', function(socket) {
socket.on('joinRoom', function(data) {
socket.username = username;
socket.room = data.room;
console.log('socket room and username in console' + socket.room+socket.username);
socket.join(socket.room);
socket.emit('test');
});
server.listen(3000);
script.js
var socket = io.connect();
$(document).ready(function() {
$('#rooms').on('click', 'a', function() {
var room = $(this).data('id');
socket.emit('joinRoom', {room: room});
});
socket.on('test', function(){
console.log('check if it works');
});
});
翡翠索引
include header.jade
div#page
div(class="box")
form(name="input", action='rooms', method="post")
div
p
| Login:
input(type="text", name="user", class="user")
input(type="submit",class="submit",value="Login")
杰德先生
include header.jade
div#page
div(class="box")
div#rooms
h2 Rooms
a(data-name='abrakadabra', data-id='1', href='music') Abrakadabra
a(data-name='aloha', data-id='2', href='art') Aloha
routes文件夹中的rooms.js
exports.rooms = function(req, res){
res.render('rooms', { title: 'Rooms' });
username = req.body.user;
};
music.js(其中一个房间)
将event.preventDefault()添加到房间单击函数中。这些链接正在刷新页面,不应该
var socket = io.connect();
$(document).ready(function() {
$('#rooms').on('click', 'a', function() {
event.preventDefault();
var room = $(this).data('id');
socket.emit('joinRoom', {room: room});
});
socket.on('test', function(){
console.log('check if it works');
});
});
你在哪里向服务器发出了
joinRoom
事件?@Krasimir对,我更新了这个(之前在这里插入我的代码之前,我对它做了一点修改)你能试着评论socket.join(socket.room)吗代码>。实际上有连接方法吗?是的,我把它放在这里,但在我的代码中,这个方法一直都在那里,所以这不是问题。如果在它后面放一个console.log
,会发生什么。它是被执行的。
var socket = io.connect();
$(document).ready(function() {
$('#rooms').on('click', 'a', function() {
event.preventDefault();
var room = $(this).data('id');
socket.emit('joinRoom', {room: room});
});
socket.on('test', function(){
console.log('check if it works');
});
});