0
프로젝트에 약간의 도움이 필요합니다. node.js에 해당 코드를 사용할 때 "빈 페이지 만"테스트하지 않습니다.Node.js에서 GET을 사용할 수 없습니다.
var http = require("http").createServer(servidor);
var express = require('express');
var io = require("socket.io").listen(http);
var app = express();
var fs = require("fs");
var querystring = require('querystring');
var contentTypes = {
js: 'text/javascript',
css: 'text/css',
json: 'application/json',
png: 'image/png',
jpg: 'image/png',
wav: 'audio/wav'
};
var recebido;
function processPost(request, response, callback) {
// Código boilerplate pra receber a querystring pedido HTTP,
// convertê-la e formatá-la em uma coleção de pares chave-valor
var queryData = "";
if(typeof callback !== 'function') return null;
request.on('data', function(data) {
queryData += data;
});
request.on('end', function() {
request.post = querystring.parse(queryData);
callback();
});
}
function servidor(req, res) {
var contentType = 'text/html';
var filePath = '.' + req.url;
if(req.method == 'POST') {
// Se o método do pedido for HTTP POST, processa a querystring
processPost(req, res, function() {
// Imprime a querystring convertida em chaves-valores
console.log(req.post);
// O request.post está disponível para ser usado aqui
// Retorna a página para o cliente com o cód. HTTP 200 (OK)
res.writeHead(200, "OK", {'Content-Type': 'text/plain'});
res.end();
});
}
else if (filePath == './' || filePath == './index.html') filePath = './index.html';
else contentType = contentTypes[req.url.split('.').pop()];
fs.readFile(filePath, function(error, content) {
if (error) {
if (error.code == 'ENOENT') {
fs.readFile('./404.html', function(error, content) {
res.writeHead(200, {
'Content-Type': 'text/html'
});
res.end(content, 'utf-8');
});
} else {
res.writeHead(500);
res.end('Ooops... houve um erro: ' + error.code + ' ..\n');
res.end();
}
} else {
res.writeHead(200, {
'Content-Type': contentType
});
res.end(content, 'utf-8');
}
});
}
app.get('/teste', function(req, res) {
res.charset = 'UTF-8'
res.send(recebido);
});
http.listen(5000, "192.168.0.108", function() {
var host = http.address().address;
var port = http.address().port;
console.log('Exemplo na URL http://%s:%s', host, port);
});
HTML 코드 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SmartHouse</title>
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/css/sb-admin.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="/css/plugins/morris.css" rel="stylesheet">
<!-- Custom Fonts
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
<script src="/font-awesome/font.js"></script>
<script src="/js/socket.io-1.4.5.js"></script> <!-- chamamos o socket.io que por padrão o socket.io cria a rota http sem precisarmos interferir -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Sistema Smart House - Automação Residencial</a>
</div>
<!-- Top Menu Items -->
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
<a href="/index.html"><i class="fa fa-home"></i> Home</a>
</li>
<li>
<a href="sala.html"><i class="fa fa-television"></i> Sala</a>
</li>
<li>
<a href="cozinha.html"><i class="fa fa-birthday-cake"></i> Cozinha</a>
</li>
<li class="active">
<a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-bed"></i> Quartos <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="demo" class="collapse">
<li class="active">
<a href="quarto1.html"> Quarto 1</a>
</li>
<li>
<a href="quarto2.html"> Quarto 2</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-bell"></i> Alarme</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Quarto 1 <small>Geral</small>
</h1>
<ol class="breadcrumb">
<li class="active">
<i class="fa fa-bed"></i> Quarto 1
</li>
</ol>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h1><center>Quarto 1 - Lampada</center></h1>
</div>
<div class="panel-body">
<a class="btn btn-success btn-lg btn-block" id="QTD1LED, ON">ON</a>
<a class="btn btn-danger btn-lg btn-block" id="QTD1LED, OFF">OFF</a>
</div>
</div>
</div>
<div class="col-lg-4">
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="/js/plugins/morris/raphael.min.js"></script>
<script src="/js/plugins/morris/morris.min.js"></script>
<script src="/js/plugins/morris/morris-data.js"></script>
<script>
document.getElementById('QTD1LED, ON').addEventListener('click', function(event) {
// Obtém os valores dos elementos #qrt e #led
var status = document.getElementById('QTD1LED, ON').id;
// Monta querystring para o POST com os valores dos elementos
var params = '{' + status + '}';
// Monta a requisição POST
var http = new XMLHttpRequest();
http.open("POST", true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {
// Chama uma função quando o status do pedido for alterado
if(http.readyState == 4 && http.status == 200) {
// Se o status for HTTP 200 (ok) e readyState==4 (DONE)
alert('O servidor recebeu: ' + params);
}
}
// Envia a requisição
http.send(params);
});
</script>
</body>
</html>
나는 나의 index.html을에서 HTTP POST 요청이 코드를 사용합니다. 어떻게 해결할 수 있을까요?
또한 서버에 요청하는 코드도 포함시켜야합니다. – mscdex
@mscdex 포함! –
하지만'recebido'는 정의되지 않았습니다 =='빈 페이지 '. –