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

问题描述 投票:0回答:1

我的目标是显示从JavaScript文件到html文件的post函数中的res.write()值。目前,当我按下“提交”按钮时,页面会重新加载并向我发送数据。但是我希望响应显示在同一网站上(两个

当前时间和比特币价格)。

我的想法是编写一个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>
javascript html node.js dom
1个回答
0
投票

使用XMLHttpRequest来查询信息。这将使一切变得容易。https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

一旦创建并发送(如果需要帮助,请告诉我,将侦听器附加到onreadystatechange EventListener。

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

。响应文档:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response

© www.soinside.com 2019 - 2024. All rights reserved.