Node.js將mysql數據發送到HTML表解析問題

Question

我需要幫助！

我目前正在嘗試創建一個節點文件，該文件在帶有搜索欄的HTML頁面上顯示來自mysql的數據。 我的問題是，目前如果我運行代碼，在搜索欄中輸入內容並按下它有時正在工作的按鈕，有時它不會。 有時它連續工作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>

我得到以下錯誤（你可以看到右邊，它有時工作）：錯誤如果我調試.log數據后：

var jqxhr = $.get('/get-servers/', function(data) {

然后，如果它成功，它會顯示將被解析到表中的內容。 但是如果解析失敗，那么它將在控制台中顯示HTML頁面的完整代碼。 （像所有東西一樣，從起始標簽到標簽

感謝您提前的建議！ （另外，抱歉我的英語不好）

Answer 1

JSON解析失敗，您可以在嘗試解析它之前記錄服務器響應，以查看響應格式是否導致任何問題或返回null。

在Index.html ln 58上添加：

 console.log(data);

Answer 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>`)); }); }); }); });

Node.js將mysql數據發送到HTML表解析問題

問題描述

2 個解決方案

解決方案1
0 2019-03-21 18:00:44

解決方案2
0 2019-03-21 18:53:18

Node.js將mysql數據發送到HTML表解析問題

問題描述

2 個解決方案

解決方案1 0 2019-03-21 18:00:44

解決方案2 0 2019-03-21 18:53:18

解決方案1
0 2019-03-21 18:00:44

解決方案2
0 2019-03-21 18:53:18