我的目标是显示从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>
使用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