如何在javascript中通过ajax获取Json数据?

时间:2014-05-08 14:20:02

标签: javascript ajax json

我试图通过javascript中的ajax获取json数据。但是在点击更新按钮时我无法从json获取更新的数据。 Json数据网址也正常工作。

下面提到代码:

<!DOCTYPE html>
<html>
  <head> 
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
    <script type="application/javascript"> 
function loadJSON() {
    var data_file = "http://www.tutorialspoint.com/json/data.json";
    var http_request = new XMLHttpRequest();
    try {
        // Opera 8.0+, Firefox, Chrome, Safari
        http_request = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer Browsers 
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }

    http_request.onreadystatechange = function () {
        if (http_request.readyState == 4) {
            var jsonObj = JSON.parse(http_request.responseText);
            alert(jsonObj.name);
            document.getElementById("Name").innerHTML = jsonObj.name;
            document.getElementById("Country").innerHTML = jsonObj.country;
        }
    }

    http_request.open("POST", data_file, true);
    http_request.send();
}
    </script> 

    <title>tutorialspoint.com JSON</title> 
  </head>
  <body> <h1>Cricketer Details</h1>
    <div id="Name">Sachin</div>
    <div id="Country">India</div>
    <button type="button" onclick="loadJSON()">Update Details </button>
  </body>
</html>

在上面的代码中,我有json数据的url。但是当点击更新按钮时,我可以通过ajax获取json数据。

我找不到我的代码中哪个错了?

提前感谢。

1 个答案:

答案 0 :(得分:-1)

如果您可以自由包含jQuery库,则可以使用$.ajax来完成。
使用返回json的常规Web方法,并调用它,如下所示:

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: serverpath + "/Service.asmx/GetJSON",
    data: {},
    dataType: "json",
    success: function (data, textStatus) {
        if (data.hasOwnProperty('d')) {
            data = data.d;
        }
        var jsonObj = data; // or $.parseJSON(data); if required
    },
    error: function (msg) {
        console.log(msg);
    }
});