#javascript #jquery #html #node.js
#javascript #jquery #HTML #node.js
Вопрос:
Мне нужна помощь!
В настоящее время я пытаюсь создать файл узла, который отображает данные из mysql на HTML-странице со строкой поиска. Моя проблема в том, что в настоящее время, если я запускаю коды, ввожу что-то в строку поиска и нажимаю кнопку, иногда это работает, иногда нет. Иногда это срабатывает 5 раз подряд, после перезагрузки это, возможно, вообще ничего не показывает.
У меня есть следующие коды:
Мой node.js server.js файл:
var http = require('http');
var fs = require('fs');
var mysql = require('mysql');
var url = require('url');
var qs = require('querystring');
var valami;
var connection = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "uzeno"
});
var data = [];
function connectToDb(){
connection.connect(function(err){
if (err){
console.log('error: ' err.stack);
return;
}
return console.log('Connected established!');
});
}
var server = http.createServer(function(request,response){
if (request.method == 'POST') {
var body = '';
request.on('data', function(data) {
body = data;
valami = body;
console.log("valami = " valami);
});
request.on('end', function() {
var post = qs.parse(body);
});
}
var path = url.parse(request.url).pathname;
fs.readFile('./index.html', function(err, file) {
if(err) {
return;
}
response.writeHead(200, { 'Content-Type': 'text/html' });
response.end(file, "utf-8");
});
if(request.method == "POST") {
} else if (request.method == "GET") {
if (request.url == '/get-servers/'){
connection.query('call kereses(?)', [valami], function(err,rows) {
if (err) {
console.log(err);
return
}
for (i=0 ; i < rows.length ; i ){
var row = rows[i];
for(q=0 ; q < row.length; q ){
var ro = row[q];
data[q] ='<p>' ro.ID '<td>' ro.Sender '<td>' ro.Receiver '<td>' ro.Targy '<td>' ro.Tartalom '<br>';
}
var teszt = JSON.stringify(data);
response.writeHead(200, {'Content-Type': 'text/html'});
response.end(teszt);
}
});
}
}
}).listen(8002);
Мой html index.html файл:
<html>
<head>
<title>Teszt</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<style>
table#servers {
border: 1px solid black;
padding:0em 2em;
border-collapse: collapse;
}
tr {
text-align: center;
border-bottom: 1px solid black;
}
td {
border: 1px solid black;
}
tr{
border: 1px solid black;
}
</style>
<body>
<input type="text" id="valamiInput" />
<button id="valami">Keresés</button>
<p id="demo"></p>
<table id="servers">
<thead>
<tr>
<th width="75">ID</th>
<th width="75">Sender</th>
<th width="75">Receiver</th>
<th width="150">Tárgy</th>
<th width="150">Tartalom</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="log"></div>
<script type="text/javascript">
jQuery(function($){
$("#valami").click(function(){
var x;
var serverData = [];
x = $("#valamiInput").val();
$("#demo").text("Keresés a következőre: " x);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/', true);
xhr.send(x);
$.get('/get-servers/', function(data) {
var serverData = JSON.parse(data);
var rows = serverData.length ;
for (i=0 ; i < rows ; i ){
$('#servers tbody').append('<tr><td>' serverData[i]);
}
});
});
});
</script>
</body>
</html>
Я получаю следующую ошибку (вы можете видеть справа, что это иногда срабатывает):
ошибка
ЕСЛИ я выполняю отладку.регистрируйте данные после :
var jqxhr = $.get('/get-servers/', function(data) {
затем, если это успешно, он показывает вещи, которые будут проанализированы в таблицах. Но если синтаксический анализ завершится неудачей, то в консоли будет показан полный код HTML-страницы. (как и все, от начального тега до тега
Заранее спасибо за предложения! (Также, извините за мой плохой английский)
Комментарии:
1.
JSONто, что вы анализируете и что вызывает ошибку, было бы полезно при диагностике вашей проблемы. Вы должны быть в состоянииconsole.log(data)перед вызовомJSON.parse(data).2. Когда возникает ошибка, и она не запускается console.log (данные) возвращает то, что находится внутри html-файла. Показан код страницы с отверстиями.
Ответ №1:
Синтаксический анализ JSON не выполняется, вы могли бы начать с регистрации ответа сервера, прежде чем пытаться проанализировать его, чтобы увидеть, вызывает ли формат ответа какие-либо проблемы или возвращается значение null.
На Index.html ln 58 добавить:
console.log(data);
Комментарии:
1. Журнал возвращает то, что находится внутри index.html файл. Я только что понял, что это, возможно, потому, что когда я загружаю index.html Я также использую response.end и, возможно, именно поэтому он показывает, что находится внутри этого HTML-файла.
2. Кроме того, по-видимому, вы отправляете два запроса, которые могут вызывать асинхронные проблемы.. Первым из них является запрос POST с использованием библиотеки XMLHttpRequest, а после этого вы используете запрос get jQuery.. Попробуйте использовать один POST-запрос, который отправляет входное значение, а также возвращает нужные данные в ответе.
Ответ №2:
Я бы предложил просто вернуть результирующий набор, поскольку вы, похоже, не выполняете никакой дополнительной фильтрации или логики
//.....snip.....//
connection.query('call kereses(?)', [valami], function(err, rows) {
if (err) {
console.log(err);
return
}
data = rows;
var teszt = JSON.stringify(data);
response.writeHead(200, {
'Content-Type': 'application/json'
});
response.end(teszt);
});
//.....snip.....// а затем разрешить получателю обрабатывать json для целей отображения
jQuery(function($) {
$("#valami").click(function() {
var x;
//var serverData = [];
x = $("#valamiInput").val();
$("#demo").text("Keresés a következőre: " x);
$.get('/get-servers/', function(data) {
var serverData = JSON.parse(data);
var body = $('#servers tbody');
body.empty(); //clean it out
$.each(serverData, function(idx, elem) {
body.append(
$(`<tr><td>${elem.ID}</td><td>${elem.Sender}</td><td>${elem.Receiver}</td><td>${elem.Targy}</td><td>${elem.Tartalom}</td></tr>`));
});
});
});
});