如何发送Http Request,它返回Json数据并显示它

时间:2013-05-15 01:15:29

标签: javascript json

我对获取Json数据非常困惑。如果有任何问题,请纠正我。下边是 我的代码:

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var data = JSON.parse(xmlhttp.responseText);
    document.getElementById("getListings").innerHTML=data;
    }
}
xmlhttp.open("GET","https://getJsonData",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.setRequestHeader("Accept", "application/json; charset=utf-8");
xmlhttp.setRequestHeader("Accept-Datetime","Fri, 15 Feb 2013 00:00:00 GMT");
xmlhttp.setRequestHeader("Authorization","XXXXXXX");
xmlhttp.send();

我无法在“getListings”div上显示任何内容。

2 个答案:

答案 0 :(得分:4)

假设你有jQuery:

$.ajax({
    type: "GET",
    url: "https://getJsonData",
    dataType: "json",
    success: processData,
    error: function(){ alert("failed"); }
});

function processData(data)
{
    //do something with data
}

另外,不确定你只想将innerHtml设置为json对象本身,你可能希望通过使用data.someProperty

从json中获得某种有价值的值。

答案 1 :(得分:0)

我看到了几个问题:

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

您应该使用:

xmlHttp.setRequestHeader('Content-Type', 'application/json')

但是,我会选择httpRequest.setRequestHeader('Accept', 'application/json');,因为它告诉服务器你要接受JSON,你的状态是你发送JSON。

现在,当您解析JSON时,您可能希望查看此内容:Parse JSON in JavaScript?并非所有浏览器都可以解析JSON。

现在,当您解析时,您将不仅要将其放入innerhtml中,而且要将其格式化,然后根据需要将格式化的html代码放入innerhtml中。

查看您是否正确解析它的一种简单方法是让警报只显示json中的一个属性。