如何从网站中将数据计数器拉到另一个HTML项目中作为JS变量使用 [英] How to pull data counter from a website to use in another HTML project as a JS variable
问题描述
您好我正在尝试找到一种方法，可以将显示在不属于我自己的网站上的变量拉到我自己的网站上，以便我可以将它用作JavaScript变量。理想情况下，我希望能够显示此变量，并在网站系统中更新时更新它。
我现在一直在寻找几天并似乎无法找到一个清楚的解释，我可以如何实现这一点。更具体地说，我的学校跟踪停车数据和有多少空间可用，我希望能够在我正在处理的HTML项目中使用这些数字。
如果有人能够向我解释如何使用任何必要的方法将这两个数字作为JavaScript变量在我的项目中访问，那么我将不胜感激。 $ b
在您的特定情况下，您可以使用它，但不需要网页抓取。正如JasonK的评论中所述，您可以使用与该页面相同的API调用：
https：// www。 jmu.edu/cgi-bin/parking_get_sign_data.cgi?date=1441292695108
现在，您无法使用由于同源策略，您的网站上的API，但您可以创建一个小型服务来获取您的数据。在node.js中它可能看起来像这样，但是你可以很容易地在php中实现相同的功能：
var request = require（ 请求）;
var http = require（'http'）;
var server = http.createServer（onRequest）;
server.listen（3000）;
// ------------------------------------ ----------------
函数onRequest（req，res）{
var parkingUrl ='https://www.jmu.edu/ cgi-bin / parking_get_sign_data.cgi？date ='+（new Date（））。getTime（）;
request（parkingUrl，function（error，response，body）{
var data = error;
var status = 404;
如果（！error）{
status = 200;
data = {
championStatus：getStatus（body，'2'），
warsawStatus：getStatus（body，'10' ）'
};
}
res.writeHead（status，{'Content-Type'：'application / json'，Access-Control-Allow-Origin *}）;
res.write（JSON.stringify（data））;
res.end（）;
}）;
}
// ------------------------------- ---------------------
函数getStatus（ss，si）{
var status = ss;
status = status.split（< SignId>+ si +< / SignId>）;
status = status [1];
status = status.split（< Display>）;
status = status [1];
status = status.split（< / Display>）;
status = status [0];
status = status.replace（''，''）;
if（isNaN（status））{
// do nothing
} else {
status = parseInt（status）; （status =='Errors'）{status ='';}
else if（status！='FULL'&& isNaN（status）
if ）{status ='Unavailable';}
else if（status！=''&& status！='FULL'&&& status！='OPEN'）{
if（status =='1'）{status = status +'space available'; }
else {status = status +'spaces available'; }
}
返回状态;
getStatus 函数是直接从 https://www.jmu.edu/parking/ 网站，我宁愿使用 xml2js 或类似的模块来分析响应和数据。 你可以得到如下状态：
函数httpGetAsync（url，callback）
{
var xmlHttp = new XMLHttpRequest（）;
xmlHttp.onreadystatechange = function（）{
if（xmlHttp.readyState == 4&& xmlHttp.status == 200）{
callback（xmlHttp.responseText）;
}
}
xmlHttp.open（GET，url，true）; //对于异步
是真的xmlHttp.send（null）;
httpGetAsync（http：// localhost：3000 /，function（res）{
var data = JSON.parse（res）;
console .log（data）;
}）;
不要忘记更改 localhost：3000 到您的服务器地址，调整 Access-Control-Allow-Origin 标头，以限制谁可以使用您的服务并添加一些错误处理。
Hi I am trying to find a way to be able to pull a variable that is displayed on a website that is not my own onto one that is my own so I can use it on mine as a JavaScript variable. Ideally, i would like to be able to display this variable and also have it update when it is updated within the website's system.
I have been searching for a few days now and can't seem to find a clear explanation on how i could accomplish this. To be more specific, my school keeps track of parking data and how many spaces are available and i would like to be able to use these numbers in the HTML project i'm working on.
I would greatly appreciate it if someone could explain to me how to make these two numbers accessible as JavaScript variables in my project using whatever means necessary.
In your particular case, you could use it, but you don't need web scraping. As mentioned in the comments by JasonK You can use the same API call that the page is using:
https://www.jmu.edu/cgi-bin/parking_get_sign_data.cgi?date=1441292695108
Now, you cannot use that API from your website because of same-origin policy, but you can create a small service to get your data from. In node.js it could look like this, but you can easily implement the same function in php:
var request = require("request");
var http = require('http');
var server = http.createServer(onRequest);
server.listen(3000);
//----------------------------------------------------
function onRequest(req, res){
var parkingUrl = 'https://www.jmu.edu/cgi-bin/parking_get_sign_data.cgi?date=' + (new Date()).getTime();
request(parkingUrl, function (error, response, body) {
var data = error;
var status = 404;
if(!error){
status = 200;
data = {
championStatus : getStatus(body, '2'),
warsawStatus : getStatus(body, '10')
};
}
res.writeHead(status, { 'Content-Type': 'application/json', "Access-Control-Allow-Origin":"*" });
res.write(JSON.stringify(data));
res.end();
});
}
//----------------------------------------------------
function getStatus(ss, si){
var status = ss;
status = status.split("<SignId>"+si+"</SignId>");
status = status[1];
status = status.split("<Display>");
status = status[1];
status = status.split("</Display>");
status = status[0];
status = status.replace(' ','');
if(isNaN(status)){
// do nothing
} else {
status = parseInt(status);
}
if( status == 'Errors'){status = '';}
else if(status != 'FULL' && isNaN(status)){status = 'Unavailable';}
else if(status != '' && status != 'FULL' && status != 'OPEN'){
if(status == ' 1'){status = status + ' space available'; }
else{status = status + ' spaces available'; }
}
return status;
}
The getStatus function is taken straight from the https://www.jmu.edu/parking/ website, i'd rather use xml2js or a similar module to parse the response and the data.
From your website you can now get the status like this:
function httpGetAsync(url, callback)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
callback(xmlHttp.responseText);
}
}
xmlHttp.open("GET", url, true); // true for asynchronous
xmlHttp.send(null);
}
httpGetAsync("http://localhost:3000/", function(res){
var data = JSON.parse(res);
console.log(data);
});
Don't forget to change localhost:3000 to your server address, adjust the Access-Control-Allow-Origin header to limit who can use your service and add some error handling.
这篇关于如何从网站中将数据计数器拉到另一个HTML项目中作为JS变量使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
