Modifying the URL of an AJAX call prior to sending

Question

Modifying the URL of an AJAX call prior to sending

I am looking to dynamically insert the data entered in a text box labeled 'postcode' into the URL parameters 'VALUE1' and 'VALUE2'. Unfortunately, I lack examples to provide as I am unsure of where to begin.

<input type="text" name="postcode" placeholder="Postcode" ><br>
<button type="button" onclick="loadDoc()">Get Postcode</button>

<p id="Addresses">No Postcode</p>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("Addresses").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "https://api.getaddress.io/v2/uk/VALUE1&VALUE2", true);
  xhttp.send();
}
</script>

My query is

javascript ajax

Answer 1

Answer №1

To improve your code, consider implementing encodeURI and adding input validation before making the API call. Take a look at this demo on https://jsfiddle.net/

<input id="text-box1" type="text" name="postcode" placeholder="Enter Postcode" ><br>
<input id="text-box2" type="text" name="postcode" placeholder="Enter Second Postcode" ><br>
<button type="button" onclick="loadDoc()">Fetch Postcodes</button>

<p id="Addresses">No Postcodes Found</p>

<script>
function loadDoc() {
 var val = document.getElementById("text-box1").value;
 var val2 = document.getElementById("text-box2").value;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("Addresses").innerHTML = xhttp.responseText;
    }
  };
  var uri = encodeURI("https://api.getaddress.io/v2/uk/"+val+"&"+val2);
  console.log(uri);
  xhttp.open("GET", uri, true);
  xhttp.send();
}
</script>

Answer 2

To improve your code, consider implementing encodeURI and adding input validation before making the API call. Take a look at this demo on https://jsfiddle.net/

<input id="text-box1" type="text" name="postcode" placeholder="Enter Postcode" ><br>
<input id="text-box2" type="text" name="postcode" placeholder="Enter Second Postcode" ><br>
<button type="button" onclick="loadDoc()">Fetch Postcodes</button>

<p id="Addresses">No Postcodes Found</p>

<script>
function loadDoc() {
 var val = document.getElementById("text-box1").value;
 var val2 = document.getElementById("text-box2").value;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("Addresses").innerHTML = xhttp.responseText;
    }
  };
  var uri = encodeURI("https://api.getaddress.io/v2/uk/"+val+"&"+val2);
  console.log(uri);
  xhttp.open("GET", uri, true);
  xhttp.send();
}
</script>

Answer 3

Answer №2

Here are some steps to consider:

<input type="text" name="zipcode" placeholder="Zip Code" ><br>
<button type="button" onclick="fetchData()">Retrieve Zip Code</button>

<p id="Locations">No Zip Code Found</p>

<script>
function fetchData() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      document.getElementById("Locations").innerHTML = xhr.responseText;
    }
  };
  var zipcode = encodeURIComponent(document.getElementsByName("zipcode")[0].value);
  xhr.open("GET", "https://api.getlocation.io/v2/us/"+zipcode+"&"+zipcode, true);
  xhr.send();
}
</script>

This code retrieves the value of an input element with the name attribute set to "zipcode", encodes it for a URL, and then appends it to the API endpoint through string concatenation.

Answer 4

Here are some steps to consider:

<input type="text" name="zipcode" placeholder="Zip Code" ><br>
<button type="button" onclick="fetchData()">Retrieve Zip Code</button>

<p id="Locations">No Zip Code Found</p>

<script>
function fetchData() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      document.getElementById("Locations").innerHTML = xhr.responseText;
    }
  };
  var zipcode = encodeURIComponent(document.getElementsByName("zipcode")[0].value);
  xhr.open("GET", "https://api.getlocation.io/v2/us/"+zipcode+"&"+zipcode, true);
  xhr.send();
}
</script>

This code retrieves the value of an input element with the name attribute set to "zipcode", encodes it for a URL, and then appends it to the API endpoint through string concatenation.

Answer 5

Answer №3

It seems like you are not utilizing JQUERY, instead opting for pure JavaScript. Here's an update for your code.

Please note that you have one field, but two values. This needs to be aligned first.

<input type="text" id="postcode" name="postcode" placeholder="Postcode"><br>
<button type="button" onclick="loadDoc()">Get Postcode</button>

<p id="Addresses">No Postcode</p>

<script>
function loadDoc() {

 Value = document.getElementById("postcode").value

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("Addresses").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "https://api.getaddress.io/v2/uk/"+Value+"&"+Value, true);
  xhttp.send();
}
</script>

Answer 6

It seems like you are not utilizing JQUERY, instead opting for pure JavaScript. Here's an update for your code.

Please note that you have one field, but two values. This needs to be aligned first.

<input type="text" id="postcode" name="postcode" placeholder="Postcode"><br>
<button type="button" onclick="loadDoc()">Get Postcode</button>

<p id="Addresses">No Postcode</p>

<script>
function loadDoc() {

 Value = document.getElementById("postcode").value

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("Addresses").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "https://api.getaddress.io/v2/uk/"+Value+"&"+Value, true);
  xhttp.send();
}
</script>

Answer 7

Answer №4

To retrieve the value of the postcode field, use the code snippet below:

xhttp.open("GET", "https://api.getaddress.io/v2/uk/" + document.getElementById("postcode").value +"&" + document.getElementById("postcode").value, true);

Answer 8

To retrieve the value of the postcode field, use the code snippet below:

xhttp.open("GET", "https://api.getaddress.io/v2/uk/" + document.getElementById("postcode").value +"&" + document.getElementById("postcode").value, true);

Modifying the URL of an AJAX call prior to sending

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Where should the logic for translating API responses to reducers be stored?

Heroku experiencing instability with Javascript/MySQL project during requests

Regular Expression - Invalid character detected in output

How can you tell if a browser window is minimized when a user is switching to another window on an iPhone?

Creating a function within an ajax call presents a challenge that needs to be

Comparing AngularJS controller and template encapsulation to Angular components: a breakdown

Creating an array of logos in ReactJS with the help of TailwindCSS

Use an EditText to capture user input, then pass the variables to a Webview by executing a javascript command

Tips for maximizing the benefits of debounce/throttle and having a truly dynamic experience

Finding a specific document in MongoDB using a unique slug within Next.js: A step-by-step guide

Ways to display or conceal information depending on the dropdown choice

Empty response returned by Next.js API Routes

Create a random word from a single string within the data in Nuxt.js

How can I handle optional props with defaults in React + TypeScript without relying on typecasting while ensuring strictNullChecks is enabled?

I'm confused why this particular method within a class is not being inherited by the next class. Rather than seeing the expected extension, I am presented with - [Function (

Encountering an error while configuring webpack with ReactJS: Unexpected token found while

Error encountered when running NPM start - file path unable to locate JSON package file

Uncover concealed words within PDF documents

Is there a way to attach a model to an Angular directive?

Utilize Vue.js to incorporate an external JavaScript file into your project