Question

我需要显示我在SourceForge上托管的工具的总下载量。

他们有一个API来返回JSON格式的数据。但返回的数据有很多信息，我只需要其中的一个。

这是SourceForge API的URL，显示数据：
https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19

我能够在本地文件上执行此操作，但我无法通过外部源工作。

我的HTML文件代码：

<html>
<title>Total Downloads</title>
<body>
    <div id="container">
        <div id="output">NO DATA</div>
    </div>
    <script src="totdwn.js"></script>
</body>
</html>

我的totdwn.js文件代码：

var jcontent = {
    "total": 123456789
}
var output = document.getElementById('output');
output.innerHTML = jcontent.total;

这很好用，但数据必须手动插入JS文件中。我想从URL中获取数据。网址上的total信息相同，但如何将其加载到jcontent变量中？

Answer 1

您需要使用Ajax向该URL发出请求并检索JSON数据。你可以用vanilla JavaScript做到这一点，或者使用jQuery更容易：

var url = "https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19";

$.ajax({
  method: "GET",
  cache: false,
  url: url,
  success: function(data) {
    document.getElementById('output').innerHTML = data.total;
  },
  error: function(error) {
    //What do you want to do with the error?
  },
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div id="output">NO DATA</div>
</div>

如果你想在vanilla JavaScript中这样做，这是一个例子：

var url = "https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19";

var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
  if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
    document.getElementById('output').innerHTML = JSON.parse(xmlHttp.responseText).total;
}
xmlHttp.open("GET", url, true);
xmlHttp.send();

<div id="container">
  <div id="output">NO DATA</div>
</div>

Answer 2

正如 Racil Hilan 所说，你可以用普通的JavaScript做到这一点，所以这是解决方案。

import sys

import time
import threading

from PyQt5.QtWidgets import (QPushButton, QApplication, QMainWindow, QDialog, QVBoxLayout, QLabel)
from PyQt5.QtCore import QObject, pyqtSignal

class Helper(QObject):
    finished = pyqtSignal()

def some_task(helper):
    time.sleep(2)
    helper.finished.emit()

class MyWarnings(QDialog):
    def __init__(self):
        super(MyWarnings, self).__init__()
        widget = QLabel('wait')
        layout = QVBoxLayout()
        layout.addWidget(widget)
        self.setLayout(layout)

class Window(QMainWindow):
    def __init__(self):
        QMainWindow.__init__(self)
        self.widget = QPushButton('push me')
        self.widget.pressed.connect(self.push_me)
        self.setCentralWidget(self.widget)

    def push_me(self):
        self.a = MyWarnings()
        self.a.show()
        self.helper = Helper()
        self.helper.finished.connect(lambda: self.widget.setText('done!'))
        self.helper.finished.connect(self.a.close)
        threading.Thread(target=some_task, args=(self.helper, )).start()


app = QApplication(sys.argv)
window = Window()
window.show()
sys.exit(app.exec_())

Answer 3

您不需要使用jQuery或任何第三方库。

您可以使用纯JavaScript来制作XMLHttpRequests。这个帮助函数适用于所有浏览器。

var newXHR = null;   
function sendXHR(type, url, data, callback) {
  newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
  newXHR.open(type, url, true);
  newXHR.send(data);
  newXHR.onreadystatechange = function() {
    if (this.status === 200 && this.readyState === 4) {
      callback(this.response);
    }
  };
}

上述帮助函数适用于所有浏览器。

<强>其中：


type =可能是HTTP动词，在本例中为GET。

url =要请求的网址字符串。

data =可能是null。

callback =响应准备就绪时的回调函数。 (this.status === 200 && this.readyState === 4)。

这样的事情：

＆＃13;

(function() {
  var newXHR = null;

  function sendXHR(type, url, data, callback) {
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
    newXHR.open(type, url, true);
    newXHR.send(data);
    newXHR.onreadystatechange = function() { // Use onreadystatechange instead onload.
      if (this.status === 200 && this.readyState === 4) {
        callback(this.response);
      }
    };
  }

  sendXHR("GET", "https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19", null, function(response) {
    var data = JSON.parse(response);
    document.getElementById("output").innerHTML = data.total;
  });

}());

＆＃13;

<div id="container">
  <div id="output">NO DATA</div>
</div>

＆＃13;

将JSON（从URL）特定信息显示为HTML

3 个答案: