JSを使用してHTMLでJsonレスポンスを表示しようとしています

Question

Webページにjsonを表示しようとしていますが、次のコードを使用していますが動作しません。

<button type="submit" onclick="javascript:send()">call</button> 

<div id="div"></div> 

<script type="text/javascript" language="javascript"> 
function send() 
{ 
    var xmlhttp = new XMLHttpRequest(); 
    //xmlhttp.onreadystatechange = callbackFunction(xmlhttp); 
    xmlhttp.open("GET", "http://stam/1.1/json/url=https://www.google.co.il"); 
    xmlhttp.setRequestHeader("Content-type", "application/json"); 
    xmlhttp.send(); 
    xmlhttp.responseType = 'json'; 
    xmlhttp.setRequestHeader("Content-Type", "application/json"); 
    //xmlhttp.onreadystatechange = callbackFunction(xmlhttp); 
    var requestDoneAndOK = false; 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState === 4) { 
      if (xmlhttp.status === 200) { 
       //requestDoneAndOK = true; 
       var jsonResponse = JSON.parse(xmlhttp.responseText); 
       document.getElementById("div").innerHTML = xmlhttp.statusText + ":" + xmlhttp.status + "<BR><textarea rows='100' cols='100'>" + jsonResponse + "</textarea>"; 

      }    
     } 
    }; 

} 


</script> 

Answer 1

あなたのURLが正しくありません。また、コードに記述されているコメントアウトされた行を削除して、動作させる必要があります。

は、あなたはそれが働いているかどうかを確認するために、このダミーのURLを使用することができます：あなたが提供 https://reqres.in/api/users?page=2

function send() 
{ 
    var xmlhttp = new XMLHttpRequest(); 
    //xmlhttp.onreadystatechange = callbackFunction(xmlhttp); 
    xmlhttp.open("GET", "http://stam/1.1/json/url=https://www.google.co.il"); 
    xmlhttp.setRequestHeader("Content-type", "application/json"); 
    xmlhttp.send(); 
    // Remove the below commented lines and change the url 
    //  xmlhttp.responseType = 'json'; 
    //  xmlhttp.setRequestHeader("Content-Type", "application/json"); 
    //  xmlhttp.onreadystatechange = callbackFunction(xmlhttp); 
    var requestDoneAndOK = false; 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState === 4) { 
      if (xmlhttp.status === 200) { 
       //requestDoneAndOK = true; 
       var jsonResponse = JSON.parse(xmlhttp.responseText); 
       document.getElementById("div").innerHTML = xmlhttp.statusText + ":" + xmlhttp.status + "<BR><textarea rows='100' cols='100'>" + jsonResponse + "</textarea>"; 

      }    
     } 
    }; 

} 

Answer 2

URLが動作するようには思えません。ブラウザコンソールを開きます（F12キーを押し、コンソールタブに切り替えます）。たとえば、http://date.jsontest.com/を試すと、ブラウザコンソールにエラーが記録されます。

Firefoxは何らかの理由で私にリクエストを許可しましたが、Chromiumは要求しませんでした。 Chromiumのコンソールに問題があった場所の正確な行番号が表示されました。

1. xmlhttp.setRequestHeader("Content-Type", "application/json");を削除しました。

2. xmlhttp.responseType = 'json';の応答タイプはtextである必要があります。

最終製品です。 jsonResponse.time

<button type="submit" onclick="javascript:send()">call</button> 

<div id="div"></div> 

<script type="text/javascript" language="javascript"> 
    function send() { 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.open("GET", "http://date.jsontest.com/"); 
    xmlhttp.setRequestHeader("Content-type", "application/json"); 
    xmlhttp.send(); 
    xmlhttp.responseType = 'text'; 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState === 4) { 
     if (xmlhttp.status === 200) { 
      var jsonResponse = JSON.parse(xmlhttp.responseText); 
      document.getElementById("div").innerHTML = xmlhttp.statusText + ":" + xmlhttp.status + "<br><textarea rows='100' cols='100'>" + jsonResponse.time + "</textarea>"; 
     } 
     } 
    }; 
    } 
</script> 

を全体JSONオブジェクトを印刷するには：：私はその値を取得するために、JSONオブジェクトのキーを指定する必要があることに注意してください

// var jsonResponse = JSON.parse(xmlhttp.responseText); No need for this. 
document.getElementById("div").innerHTML = xmlhttp.statusText + ":" + xmlhttp.status + "<br><textarea rows='100' cols='100'>" + xmlhttp.responseText + "</textarea>"; 

また、unobtrusive JavaScriptの概念は価値があります見てみましょう。