CODEWITHSUNDEEP
javascriptarraysparameter-passing
ChrisPE
ChrisPE

Reputation: 15

Pass parameters to GET-Request

G'morning folks,

I just have a small problem to fix this issue:

I have a page which should GET some data from a url when opening and the display in the own content. But the GET url contains Parameters from my url.

So: 1. Get Parameters from my URL like www.mydomain.com?test=1&test1=bla 2. open GET with this parameters (1 and bla) and display result

Here my current version:

<body>
  <h3>Visa Informationen</h3>
  <p id="data"></p>
  <script>
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("data").innerHTML = myObj.response.visa.content;
      }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
  </script>
  <script>
    function getURLParameter(name) {
      var value = decodeURIComponent((RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, ""])[1]);
      return (value !== 'null') ? value : false;
    }

    var param = getURLParameter('test');
    if (param) document.getElementById("testnr").innerHTML = param;

    var param1 = getURLParameter('test1');
    if (param1) document.getElementById("testnr1").innerHTML = param1;

    var url = "https://api01.otherdomain.com?test=" + param + "&test1" + param1 + "&trv=0&vis=1"
  </script>  
</body>

Any hint where the problem is with this code?

Kind regards, Chris

Upvotes: 1

Views: 216

Answers (2)

ChrisPE
ChrisPE

Reputation: 15

Okay, i fixed the matter.

Here my result which works fine for me:

    <script>
function getURLParameter(name) {
  var value = decodeURIComponent((RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, ""])[1]);
  return (value !== 'null') ? value : false;
}

var param = getURLParameter('test');

var param1 = getURLParameter('test1');

var url = "https://api01.otherdomain.com?test=" + param + "&test1" + param1 + "&trv=0&vis=1"
</script>

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("additionalContent").innerHTML = myObj.response.additionalContent;
        document.getElementById("data").innerHTML = myObj.response.visa.content;
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

</script>

Upvotes: 0

Anant Dabhi
Anant Dabhi

Reputation: 11104

It seems like you having issue with script execution order.

I assume that testnr element coming from your XML ajax request.

You have two script block in your HTML and it will executed while page load.

When second script block is running your fist XMLHttpRequest not completed so it not able to find given HTML tag document.getElementById("testnr").innerHTML

To overcome this issue you need to execute script only after XMLHttpRequest request is completed.

In your case : 

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("data").innerHTML = myObj.response.visa.content;
// Execute new created function here 
        SetValues();

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


function getURLParameter(name) {
  var value = decodeURIComponent((RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, ""])[1]);
  return (value !== 'null') ? value : false;
}

function SetValues()
{
var param = getURLParameter('test');
if (param) document.getElementById("testnr").innerHTML = param;

var param1 = getURLParameter('test1');
if (param1) document.getElementById("testnr1").innerHTML = param1;

var url = "https://api01.otherdomain.com?test=" + param + "&test1" + param1 + "&trv=0&vis=1"
}
</script>

Upvotes: 2

Related Questions