[英]Get value from client side script and override server side script
以下是我的服务器端和客户端JavaScript文件。 我在服务器端脚本中有硬编码的queryObject我可以在客户端显示正文。 问题是如何从客户端获取服务器端queryObject变量的值并覆盖现有值。 简而言之,当我编写硬编码时,当前程序将USD转换为GBP。 我想要一种从客户端访问queryObject并给出我自己的值的方法。
//=====================Server Side Script========================//
var request = require('request');
const path = require("path");
const express = require("express");
const app = express();
// const hbs = require("hbs");
const port = process.env.PORT || 3000;
const pathPublic = path.join(__dirname, "../public");
const pathView = path.join(__dirname, "../templates/views");
app.set("view engine", "hbs");
app.set("views", pathView);
app.use(express.static(pathPublic));
app.get("", (req, res) => {
res.render("home", {
title: "Currency Converter"
});
});
app.get("/currency", (req, res) => {
const uri = "https://currency-exchange.p.rapidapi.com/exchange?",
headers={
'x-rapidapi-host': 'currency-exchange.p.rapidapi.com',
'x-rapidapi-key': 'b13c4f3d67msh8143a7f1298de7bp1e8586jsn4453f885a4e7'
}
const queryObject = {
q: 1,
from: 'USD',
to: 'GBP'
};
request({
url:uri,
qs:queryObject,
headers: headers
},
function (error, response, body) {
if (error) {
console.log('error:', error); // Print the error if one occurred
} else if(response && body) {
console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
res.json({'body': body}); // Print JSON response.
}
})
});
app.listen(port, () => {
console.log("Server is running on port " + port);
});
//=====================Client Side Script========================//
const currency = document.querySelector("#currency");
const text1= document.querySelector(".text1");
const text2= document.querySelector(".text2");
const text3= document.querySelector(".text3");
const Form = document.querySelector("form");
function refreshPage() {
window.location.reload();
}
Form.addEventListener("submit", e => {
e.preventDefault();
fetch("http://localhost:3000/currency").then(response => {
response.json().then(data => {
if (data.error) {
console.log(data.error);
} else {
currency.textContent = data.body;
}
});
});
解:
为了修改服务器中的任何值,您必须发送适当的HTTP方法(例如:POST),并在其中包含适当的数据。 并让服务器处理请求以更改对象的内容以从那里进行API调用。
我对您的代码进行了一些更改以进行演示,并安装'cors','body-parser'模块和其他缺少的模块以使其运行。
HTML:
<!DOCTYPE html>
<html>
<body>
<div id="currencyType">
<select id="fromCurrency">
<option value="USD">USD</option>
<option value="GBP">GBP</option>
</select>
<select id="toCurrency">
<option value="USD">USD</option>
<option value="GBP">GBP</option>
</select>
</div>
<button type="button" id="getCurrency">Get Currency</button>
<div id="currency" name="currency" type="text"></div>
<script>
const currency = document.querySelector("#currency");
const btn = document.getElementById("getCurrency");
function refreshPage() {
window.location.reload();
}
btn.addEventListener("click", e => {
var fromCurrency = document.getElementById("fromCurrency");
fromCurrency = fromCurrency.options[fromCurrency.selectedIndex].value;
var toCurrency = document.getElementById("toCurrency");
toCurrency = toCurrency.options[toCurrency.selectedIndex].value;
var data = {
fromCurrency: fromCurrency,
toCurrency: toCurrency
};
// calls the API with POST method with data in it
fetch("http://localhost:3000/currency", {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
}).then(response => {
response.json().then(data => {
if (data.error) {
console.log(data.error);
} else {
currency.textContent = "1 " + fromCurrency + " = " + data.body + " " + toCurrency;
}
});
});
});
</script>
</body>
</html>
的NodeJS:
var request = require('request');
const path = require("path");
const express = require("express");
const app = express();
var cors = require('cors')
// const hbs = require("hbs");
var bodyParser = require('body-parser');
const port = process.env.PORT || 3000;
const pathPublic = path.join(__dirname, "public");
const pathView = path.join(__dirname, "templates/views");
app.set("view engine", "hbs");
app.set("views", pathView);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(pathPublic));
app.use(cors())
app.get("", (req, res) => {
res.render("home", {
title: "Currency Converter"
});
});
app.post("/currency", (req, res) => {
console.log(req.body);
const uri = "https://currency-exchange.p.rapidapi.com/exchange?",
headers={
'x-rapidapi-host': 'currency-exchange.p.rapidapi.com',
'x-rapidapi-key': 'b13c4f3d67msh8143a7f1298de7bp1e8586jsn4453f885a4e7'
}
const queryObject = {
q: 1,
from: req.body.fromCurrency,
to: req.body.toCurrency
};
console.log(queryObject);
request({
url:uri,
qs:queryObject,
headers: headers
}, function (error, response, body) {
if (error) {
console.log('error:', error); // Print the error if one occurred
} else if(response && body) {
console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
res.json({'body': body}); // Print JSON response.
}
})
});
app.listen(port, () => {
console.log("Server is running on port " + port);
});
样本输出:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.