使用 JavaScript 从网站获取 JSON

Question

我有一个 ruby​​ 服务器正在运行，它返回以下格式的 JSON：-

{"id":7,"user_name":"logix_5","first_name":"sadf","last_name":"sdgdg","email":"lo@hi.com","password":"l5","phone_number":"123876","user_type":"Manager","job_title":"dfhst","created_at":"2016-05-24T02:52:23.000Z","updated_at":"2016-05-24T06:52:28.000Z"}

当我们转到链接时 http://192.168.68.211:3000/vlapi/login?user_name=logix_5&password=l5

我希望能够从网站访问 JSON 数据并使用纯 JS 从中提取数据。我已经尝试了以下代码：-

 var res =  new XMLHttpRequest();
 var url = "http://128.199.68.211:3000/vlapi/login?  user_name=logix_5&password=l5"   
 res.open("GET",url,true)
 res.send()
 document.write("Working")  
 document.write(res.responseText)

我已经尝试过How to get JSON from URL in Javascript? 中给出的代码以及其他一些类似的问题，但“res.responseText”没有返回任何内容。我在代码中遗漏了什么。

注意：代码必须与 QML 一起集成

编辑： 我尝试将https://stackoverflow.com/a/35970894/5608864中给出的代码修改为

getJSON("http://192.168.68.211:3000/vlapi/login?user_name=logix_5&password=l5",
    function(err, data) {
      if (err != null) {
        alert("Something went wrong: " + err);
      } else {
        alert("Your query count: " + data.query.id);
      }
    });

控制台中仍然没有打印任何内容。

编辑 我使用https://www.hurl.it/ 向“http://192.168.68.211:3000/vlapi/login?user_name=logix_5&password=l5”发出 GET 请求

它会返回类似这样的响应

Cache-Control: max-age=0, private, must-revalidate
Connection: Keep-Alive
Content-Length: 252
Content-Type: application/json; charset=utf-8
Date: Tue, 24 May 2016 11:07:15 GMT
Etag: W/"30fc28a52d407ac1074eb62d7da0b5d0"
Server: WEBrick/1.3.1 (Ruby/2.3.1/2016-04-26)
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-Request-Id: c7a0d898-da00-4325-99ff-3164d9e03cf4
X-Runtime: 0.017905
X-Xss-Protection: 1; mode=block
BODY view raw

{
"id": 7,
"user_name": "logix_5",
"first_name": "sadf",
"last_name": "sdgdg",
"email": "lo@hi.com",
"password": "l5",
"phone_number": "123876",
"user_type": "Manager",
"job_title": "dfhst",
"created_at": "2016-05-24T02:52:23.000Z",
"updated_at": "2016-05-24T06:52:28.000Z"
}

这对调试问题有帮助吗？能否请您留下代码 sn-p 以获取 JSON。

Answer 1

Ajax 请求是异步的，所以res.responseText 在调用时没有设置。您必须使用事件处理程序：

res.addEventListener('load', function () {
    console.log(res.responseText)
})

Answer 2

网址中有空格。

改变这一行：

var url = "http://128.199.68.211:3000/vlapi/login? user_name=logix_5&password=l5"

收件人：

 var url = "http://128.199.68.211:3000/vlapi/login?user_name=logix_5&password=l5" 

Answer 3

您在问题中提到的两个 URL 都不同，即使两者都没有返回任何内容，如果您尝试获取响应的服务器不可用，则会出现无法访问的错误消息站点尝试打开它 或者可能是服务器端的一些程序错误。 它应该工作

Answer 4

我在您的代码中看到的第一个问题是删除user_name 参数之前的前导空格。

然后，当答案返回时，我会将您的答案转换为一个对象：

res.addEventListener('load', function () {
    console.log(res.responseText);
    obj = JSON.parse(res.responseText);
})

Answer 5

请首先确保 json 响应有效。你可以使用http://jsonlint.com/。

对于 QML，我通常使用一组三个函数来实现简洁的代码和可重用性：助手、调用者和回调函数。

在这个简短的示例中，我使用了上述其他 SO 问题中的 yahoo 链接。通过点击“Hello World”，调用者jsonYahoo 运行，在jsonYahooCallback 中response 包含作为字符串的答案，而result 包含解析的json。

结果：

代码：

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    visible: true

    MouseArea {
        anchors.fill: parent
        onClicked: {
            jsonYahoo()
        }
    }

    Text {
        id: hello
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }

    function jsonYahoo() {
        var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback"
        var data = ''
        request(url, data, jsonYahooCallback)
    }

    function jsonYahooCallback(success, response) {
        var result = JSON.parse(response)
        if (success === true) {
            console.log(response)
            hello.text = result.query.created
        } else {
            console.log("request failed")
        }
    }

    function request(url, data, callback) {
        var xhr = new XMLHttpRequest()
        xhr.open('POST', url, true)
        xhr.setRequestHeader('Content-Type', 'application/json')
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status && xhr.status === 200) {
                    callback(true, xhr.responseText)
                } else {
                    callback(false, xhr.responseText)
                }
            }
        }
        xhr.send(data)
    }
}