如何使用nodejs數據填充html下拉列表

Question

我想用來自 NodeJS 的 JSON 數據填充 HTML/PHP 中的選擇下拉菜單。 我怎樣才能做到這一點？ 我在運行 localhost:3000/arrivals/flights 時獲取了所有 JSON 航班數據，所以我知道代碼是正確的，但是如何將數據從 index.js 傳輸到 liveArrivalsNode.php 下拉菜單？

liveArrivalsNode.php

<html>
<head>
<link rel="stylesheet" href="colour.css">
    <script src="liveArrivalsNode.js" type="text/javascript"></script>
</head>

<body>
<?php
require 'airportArrivals.html';
?>

    <form method="GET" action="arrivals/flights">
        Filter by Flight No.:
        <select class="flight" id="flights" name="flight">
            <option value="All">Any</option>

    </select>
    </form>
<p>
<div id="myFlights"></div>
</body>
<footer>
<caption align="bottom"><hr/><center>L00091898
</footer>
</html>

liveArrivalsNode.js

var xmlhttp;

window.onload=function(){           
    getAjaxData();
    setInterval(getAjaxData, 5000);

    // document.getElementById("flights").onchange=function(){
    // getAjaxData();
}

function getAjaxData() {
    if (window.XMLHttpRequest)
        xmlhttp=new XMLHttpRequest();
    else
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange=function (){
        showAjaxData();
    };

     xmlhttp.open("GET","http://localhost:3000/arrivals/",true);
     xmlhttp.send();
}

function showAjaxData()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {       
        var data = JSON.parse(xmlhttp.responseText);

        var output="<table border=1>";
        output+="<tr><th></th><th>Origin</th><th>Airline</th><th>Flight</th><th>Scheduled Date</th><th>Scheduled Time</th><th>Status</th>";
        for(var i=0;i<data.arrivals.length;i++)  // for each fixture 
        {
            var terminal;
            if(data.arrivals[i].terminal == "t1")
                terminal = "<img src='images/t1.jpg'/>";
            else
                terminal = "<img src='images/t2.jpg'/>";

            output += '<tr><td>'+terminal+'</td><td>'+data.arrivals[i].origin+'</td><td>'+data.arrivals[i].airline+'</td><td>'+data.arrivals[i].flight+'</td><td>'+data.arrivals[i].scheduledDate+'</td><td>'+data.arrivals[i].scheduledTime+'</td><td>'+data.arrivals[i].status+ '<input type=\'hidden\' name=\'highlight\' value=\'data.arrivals[i].highlight\'></td></tr>';
        }
        output+="</table>";

        // add output to "fixtures" div
        document.getElementById("myFlights").innerHTML=output;
    }
}

index.js

var express = require("express");
var mysql = require('mysql');
var app = express();
var moment = require('moment');
var data;
var output;

var cors = require('cors');   // NB! Needed below.
var flightNo;
var connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'root',
    password : '',
    database : 'airportdb'
});

// add route below
app.get("/arrivals/", cors(), function(req,res){

connection.query("SELECT * FROM arrivals", function(err, rows, fields) {
    if (err) throw err;             

    data = JSON.stringify(rows);

    res.writeHead(200, {"Content-Type": "text/json"});
    res.write("{ \"arrivals\":" + data+"}");
    res.end();      
    });
});

app.get("/arrivals/flights", cors(), function(req,res){
    // flightNo = req.params.flightNo;

    connection.query("SELECT flight FROM arrivals", function(err, rows, fields) {
        if (err) throw err;             

        output = JSON.stringify(rows);

        res.writeHead(200, {"Content-Type": "text/json"});
        res.write("{ \"flights\":" + output+"}");
        res.end();      
        });
});


var myServer = app.listen(3000, function() {
    soconsole.log("Server listening on port 3000");
});

Answer 1

如果您得到的 json 響應非常好，您可以使用 json_decode() 函數將響應轉換為 PHP 數組。 使用 php 數組，您可以使用 foreach 循環遍歷數組以填充下拉菜單

如何使用nodejs數據填充html下拉列表

問題描述

1 個解決方案

解決方案1
0 2022-06-03 10:06:29

如何使用nodejs數據填充html下拉列表

問題描述

1 個解決方案

解決方案1 0 2022-06-03 10:06:29

解決方案1
0 2022-06-03 10:06:29