Fatal编程技术网
  • javascript/
  • 如何使用javascript从url加载json？

如何使用javascript从url加载json？

javascript

如何使用javascript从url加载json？,javascript,Javascript,我不熟悉javascript，它应该很容易解决，但我现在迷路了 我有一个url:http:getall.json 使用JavaScript（不是JQuery或php，只是JavaScript），我想读取并解析这个JSON字符串。就是这样。访问您的url不起作用，您应该显示JSON结果。在javascript中，要使用AJAX请求获取JSON对象，可以执行以下操作： request = new XMLHttpRequest; request.open('GET', 'http://v-apps-c

我不熟悉javascript，它应该很容易解决，但我现在迷路了

我有一个url:http:getall.json
使用JavaScript（不是JQuery或php，只是JavaScript），我想读取并解析这个JSON字符串。就是这样。

访问您的url不起作用，您应该显示
JSON
结果。在javascript中，要使用
AJAX
请求获取JSON对象，可以执行以下操作：

request = new XMLHttpRequest;
request.open('GET', 'http://v-apps-campaign.com/dunkindonuts/main/get_allStore', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400){
    // Success!
    data = JSON.parse(request.responseText);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

request=newXMLHttpRequest；
request.open（'GET'，'http://v-apps-campaign.com/dunkindonuts/main/get_allStore",对),；
request.onload=函数（）{
如果（request.status>=200&&request.status<400）{
//成功！
data=JSON.parse（request.responseText）；
}否则{
//我们到达了目标服务器，但它返回了一个错误
}
};
request.onerror=函数（）{
//出现了某种连接错误
};
request.send（）；
您的结果将出现在
数据
变量中。

对url的访问无效，您应该显示
JSON
结果。在javascript中，要使用
AJAX
请求获取JSON对象，可以执行以下操作：

request = new XMLHttpRequest;
request.open('GET', 'http://v-apps-campaign.com/dunkindonuts/main/get_allStore', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400){
    // Success!
    data = JSON.parse(request.responseText);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

request=newXMLHttpRequest；
request.open（'GET'，'http://v-apps-campaign.com/dunkindonuts/main/get_allStore",对),；
request.onload=函数（）{
如果（request.status>=200&&request.status<400）{
//成功！
data=JSON.parse（request.responseText）；
}否则{
//我们到达了目标服务器，但它返回了一个错误
}
};
request.onerror=函数（）{
//出现了某种连接错误
};
request.send（）；
您的结果将出现在
数据
变量中。
JSONP调用：


function getJSONP(url, callback) {
    var script = document.createElement('script');
    var callbackName = "jsonpcallback_" + new Date().getTime();
    window[callbackName] = function (json) {
        callback(json);
    };
    script.src = url + (url.indexOf("?") > -1 ? "&" : "?") + 'callback=' + callbackName;

    document.getElementsByTagName('head')[0].appendChild(script);
}
getJSONP("http://v-apps-campaign.com/dunkindonuts/main/get_allStore", function(jsonObject){
    //jsonObject is what you want
});


常规ajax调用：


function getXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    }
    try {
        return new ActiveXObject('MSXML2.XMLHTTP.6.0');
    } catch (e) {
        try {
            // The fallback.
            return new ActiveXObject('MSXML2.XMLHTTP.3.0');
        } catch (e) {
            throw new Error("This browser does not support XMLHttpRequest.");
        }
    }
}

function getJSON(url, callback) {
    req = getXHR();
    req.open("GET", url);
    req.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var jsonObject = null,
                status;
            try {
                jsonObject = JSON.parse(req.responseText);
                status = "success";
            } catch (e) {
                status = "Invalid JSON string[" + e + "]";
            }
            callback(jsonObject, status, this);
        }
    };
    req.onerror = function () {
        callback(null, "error", null);
    };
    req.send(null);
}
getJSON("http://v-apps-campaign.com/dunkindonuts/main/get_allStore", function (jsonObject, status, xhr) {
    //jsonObject is what you want
});


我用您的url测试了这些，似乎您应该通过jsonp调用来获取数据，因为使用常规ajax调用它会返回：


No 'Access-Control-Allow-Origin' header is present on the requested resource


使用jsonp可以获取数据，但数据不是有效的json，服务器端似乎有一些php错误：


A PHP Error was encountered

...



JSONP调用：


function getJSONP(url, callback) {
    var script = document.createElement('script');
    var callbackName = "jsonpcallback_" + new Date().getTime();
    window[callbackName] = function (json) {
        callback(json);
    };
    script.src = url + (url.indexOf("?") > -1 ? "&" : "?") + 'callback=' + callbackName;

    document.getElementsByTagName('head')[0].appendChild(script);
}
getJSONP("http://v-apps-campaign.com/dunkindonuts/main/get_allStore", function(jsonObject){
    //jsonObject is what you want
});


常规ajax调用：


function getXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    }
    try {
        return new ActiveXObject('MSXML2.XMLHTTP.6.0');
    } catch (e) {
        try {
            // The fallback.
            return new ActiveXObject('MSXML2.XMLHTTP.3.0');
        } catch (e) {
            throw new Error("This browser does not support XMLHttpRequest.");
        }
    }
}

function getJSON(url, callback) {
    req = getXHR();
    req.open("GET", url);
    req.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var jsonObject = null,
                status;
            try {
                jsonObject = JSON.parse(req.responseText);
                status = "success";
            } catch (e) {
                status = "Invalid JSON string[" + e + "]";
            }
            callback(jsonObject, status, this);
        }
    };
    req.onerror = function () {
        callback(null, "error", null);
    };
    req.send(null);
}
getJSON("http://v-apps-campaign.com/dunkindonuts/main/get_allStore", function (jsonObject, status, xhr) {
    //jsonObject is what you want
});


我用您的url测试了这些，似乎您应该通过jsonp调用来获取数据，因为使用常规ajax调用它会返回：


No 'Access-Control-Allow-Origin' header is present on the requested resource


使用jsonp可以获取数据，但数据不是有效的json，服务器端似乎有一些php错误：


A PHP Error was encountered

...



在HTML中包括json文件和js代码作为模块


<script src="/locales/tshared.js"  type="module"  ></script>
<script src="/scripts/shared.js" type="module"  ></script>



根据需要调整路径和名称，随意使用区域设置。
在HTML中，将json文件和js代码作为模块


<script src="/locales/tshared.js"  type="module"  ></script>
<script src="/scripts/shared.js" type="module"  ></script>



根据需要调整路径和名称，随意使用区域设置。
这可能会对您有所帮助，您提供的url会抛出错误，并且不会返回任何JSON字符串。一些PHP会话内容崩溃。另外，如果您希望能够进行跨域AJAX调用，远程服务器应该显式地允许CORS或支持JSONP。是这样吗？@DarinDimitrov为什么会这样？我可以访问url。是的，我也是，除了它不返回JSON，而是返回一些PHP错误。也许你需要通过身份验证才能调用它。是这样吗？尝试在新的专用浏览器选项卡中打开它，您将看到错误。我无法向您显示，因为此url不适用于我。它因PHP错误而崩溃。此外，您没有回答我的问题，这个端点是否支持CORS。因为如果没有，您就无法对其进行AJAX调用。至于AJAX调用，MamaWalter已经为您提供了答案。但是如果端点不支持CORS，它将无法工作。这可能对您有所帮助，您提供的url会抛出错误，并且不会返回任何JSON字符串。一些PHP会话内容崩溃。另外，如果您希望能够进行跨域AJAX调用，远程服务器应该显式地允许CORS或支持JSONP。是这样吗？@DarinDimitrov为什么会这样？我可以访问url。是的，我也是，除了它不返回JSON，而是返回一些PHP错误。也许你需要通过身份验证才能调用它。是这样吗？尝试在新的专用浏览器选项卡中打开它，您将看到错误。我无法向您显示，因为此url不适用于我。它因PHP错误而崩溃。此外，您没有回答我的问题，这个端点是否支持CORS。因为如果没有，您就无法对其进行AJAX调用。至于AJAX调用，MamaWalter已经为您提供了答案。但是，如果端点不支持CORS，它将不起作用。谢谢您的回答！但是我在jsfiddle.net中测试了这段代码，但没有给出结果？我该怎么办？谢谢如果我将json结果粘贴到JSFIDLE中，我只想看到json结果？它不起作用，因为您提供的url不返回json，但它返回一些PHP错误。此外，除非远程服务器明确允许，否则不能进行跨域AJAX调用。谢谢您的回答！但是我在jsfiddle.net中测试了这段代码，但没有给出结果？我该怎么办？谢谢如果我将json结果粘贴到JSFIDLE中，我只想看到json结果？它不起作用，因为您提供的url不返回json，但它返回一些PHP错误。另外，除非远程服务器明确允许，否则您不能进行跨域AJAX调用。hi@Mehran Hatami我在jsfiddle.net中测试了您的代码，但它不会给出结果，我还编辑了这部分getJSON（“yourjsonurl.json”，function（jsonObject，status，xhr）{alert（jsonObject）；}）；您好@Mehran Hatami我在jsfiddle.net中测试了您的代码，但它不会给我结果，我还编辑了这部分getJSON（“yourjsonurl.json”，function（jsonObject，status，xhr）{alert（jsonObject）；}）；