在另一个 httprequest 中使用来自一个 httprequest 的 JSON 值答案

【问题标题】：Use JSON-value from one httprequest in another httprequest在另一个 httprequest 中使用来自一个 httprequest 的 JSON 值
【发布时间】：2020-04-04 12:25:33
【问题描述】：

我正在尝试将开放数据与 2 个 http 请求结合起来。我需要使用第一个响应的一个值来创建第二个 request-url（该值是第二个 url 的一部分）。我该怎么做？

这是我的代码： https://codepen.io/1234cb/pen/wvBGKze

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <h3>XMLHttpRequest</h3>
    zipcode <input type="text" id="zip" value="3136jr" title="zipcode"><br><br>
    housnr <input type="text" id="housenr" value="77" title="housenr"><br><br>
    <button type="button" onclick="loadDoc();loadDoc2()">Get Content</button>
    <p id="demo">response 1</p>
    <p id="demo2">response 2</p>

    <script>
        function loadDoc() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var myObj = JSON.parse(this.responseText);
                    document.getElementById("demo").innerHTML = myObj.response.docs[0].id;
                    //myObj.response.docs[0].id is the value/variable I need for the next httprequest
                }
            };
            xhttp.open("GET", "https://geodata.nationaalgeoregister.nl/locatieserver/v3/suggest?q=" + document.getElementById("zip").value + "+" + document.getElementById("housenr").value + "&wt=json", true);
            xhttp.send();
        };

        function loadDoc2() {
            var url = "https://geodata.nationaalgeoregister.nl/locatieserver/v3/lookup?id=adr-16dc4e7caee6f2b34222fb02b91a464e" //the value/variable myObj.response.docs[0].id should be the last part of the url (from "adr." to "64e")
            var vhttp = new XMLHttpRequest();
            vhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var Obj = JSON.parse(this.responseText);
                    document.getElementById("demo2").innerHTML = this.responseText;

                }
            };
            vhttp.open("GET", url, true);
            vhttp.send();
        };
    </script>
</body>
</html>

【问题讨论】：

stackoverflow.com/questions/52769701/…的可能重复
@photo1 您的请求同时运行。当loadDoc2 被调用时，第一个请求仍在运行。您应该在第一个请求的onreadystatechange 内调用loadDoc2。
@elias，我不知道那个线程。没有出现在我的搜索结果中

标签： javascript jquery html xmlhttprequest

【解决方案1】：

您必须将 id 传递给 loadDoc2：

function loadDoc2(id) {        
var url = "https://geodata.nationaalgeoregister.nl/locatieserver/v3/lookup?id="+id;//the value/variable myObj.response.docs[0].id should be the last part of the url (from "adr." to "64e")
var vhttp = new XMLHttpRequest();
vhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var Obj = JSON.parse(this.responseText);
document.getElementById("demo2").innerHTML = this.responseText;

 }
 }; 
  vhttp.open("GET",url, true); 
  vhttp.send();
};

并在 loadDoc 成功时调用它：

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
  var myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.response.docs[0].id;
  loadDoc2(myObj.response.docs[0].id)
  //myObj.response.docs[0].id is the value/variable I need for the next httprequest
}
 };

  xhttp.open("GET", "https://geodata.nationaalgeoregister.nl/locatieserver/v3/suggest?q=" + document.getElementById("zip").value +"+"+ document.getElementById("housenr").value +"&wt=json", true);
xhttp.send();
  };

【讨论】：

【解决方案2】：

您可以简单地调用 loadDoc2() 并带有 id 参数：

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    var response_id = myObj.response.docs[0].id;
    document.getElementById("demo").innerHTML = response_id;
    //myObj.response.docs[0].id is the value/variable I need for the next httprequest
    loadDoc2(response_id);
  }
};
  xhttp.open("GET", "https://geodata.nationaalgeoregister.nl/locatieserver/v3/suggest?q=" + document.getElementById("zip").value +"+"+ document.getElementById("housenr").value +"&wt=json", true);
  xhttp.send();
 };

  function loadDoc2(response_id = '') {        
   var url = "https://geodata.nationaalgeoregister.nl/locatieserver/v3/lookup?id="+response_id;
   var vhttp = new XMLHttpRequest();
   vhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
   var Obj = JSON.parse(this.responseText);
   document.getElementById("demo2").innerHTML = this.responseText;
  }
}; 
  vhttp.open("GET",url, true); 
  vhttp.send();
};

在onreadystatechange处理程序中，您可以将id提取到request_id并使用它调用loadDoc2(request_id)。另外，不要忘记将onclick-handler更改为仅调用loadDoc（）：

<button type="button" onclick="loadDoc();" >Get Content</button>

【讨论】：