如何在 html 中顯示 res.write()

Question

我的目標是將 post 函數中的 res.write() 值從我的 Javascript 文件顯示到 html 文件。 目前，當我按下提交按鈕時，頁面會重新加載並向我發送數據。 但我希望響應顯示在同一個網站上（兩個

當前時間和比特幣價格）。

我的想法是編寫一個 DOM 並替換

當前時間

比特幣價格

與 Javascript 文件的值。 是否可以？ 如何在 html 中引用 Javascriptfiles。

 app.post("/", function(req, res){ var crypto = req.body.cryptocoins; //example: BTC var currencyCoins = req.body.currencycoins; //example: Euro var amount = req.body.amount; //example: 3 BTC //https://www.npmjs.com/package/request | section request(options, callback) | qs from the var options = { url: "https://apiv2.bitcoinaverage.com/convert/global", methods: "GET", qs: { from: crypto, to: currencyCoins, amount: amount } } request(options, function(error, response, body){ var data = JSON.parse(body); var price = data.price; var currentTime = data.time; var currentdate = res.write("<p>Current date: " + currentTime + ".</p>"); var currentprice = res.write("<h1>The current of " + crypto + " is " + price + " " + currencyCoins + ".</h1>") });

 * { margin: 0; padding: 0; box-sizing: border-box; } body { background-image: radial-gradient( circle farthest-corner at 12.3% 19.3%, rgba(85,88,218,1) 0%, rgba(95,209,249,1) 100.2% ); font-family: "Courier New", sans-serif; color: white; } div.jackson { height: 100vh; width: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; } div.answer { display: flex; flex-direction: column; justify-content: space-around; width: 10vw; position: static; border: 1px solid white; float: left; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Coins</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="jackson"> <div class="header"> <h1>Crypto Coins</h1> </div> <div class="Form"> <form action="/" method="post"> <div class="input"> <label> <input type="text" name="amount" placeholder="Quantity"> </label> </div> <div class="coins"> <label> <select name="cryptocoins"> <option value="BTC">Bitcoin</option> <option value="LTC">Litecoins</option> <option value="ETH">Ethereum</option> </select> </label> </div> <div class="currency"> <label> <select name="currencycoins"> <option value="EUR">Euro</option> <option value="USD">US Dollar</option> </select> </label> </div> <div class="button-submit"> <button type="submit" name="btn"> Click </button> </div> </form> </div> <div class="answer"> <p id="time">Current Time</p> <p id="price" value="index.currentprice">Bitcoin-price</p> </div> </div> <script src="index.js" charset="utf-8"></script> <script>document.getElementById("time").innerHTML</script> </body> </html>

Answer 1

使用 XMLHttpRequest 查詢信息。 這將使一切變得容易得多。 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

創建並發送后（如果您需要幫助，請告訴我），將偵聽器附加到 onreadystatechange 事件偵聽器。

YourXMLHttpRequestVariable.onreadystatechange = () => {
    if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        // use .response and edit HTML here
    }
}

.response 文檔： https : //developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response

如何在 html 中顯示 res.write()

問題描述

1 個解決方案

解決方案1
0 2019-12-06 13:24:31

如何在 html 中顯示 res.write()

問題描述

1 個解決方案

解決方案1 0 2019-12-06 13:24:31

解決方案1
0 2019-12-06 13:24:31