Creating a dropdown menu with data loaded dynamically using ajax and json, all without relying on jquery

Question

Creating a dropdown menu with data loaded dynamically using ajax and json, all without relying on jquery

I am looking to populate a few select menus using JSON data retrieved from my PHP script. Each select menu should display different values based on the selections made in the other menus. While I understand how to clear and fill a select menu using JavaScript with an array, I am unsure how to utilize an AJAX call to retrieve the necessary JSON data for populating the menus.

It is important to note that I prefer not to use jQuery due to its size and complexity for this simple task.

Any advice or insights on this issue would be greatly appreciated.

Below is my test script for populating a menu:

var selectMenu = document.getElementById(foo);
selectMenu.options.length = 0;
for(var i=0; i<100; i++){
    selectMenu.options[i] = new Option(i + "Option text", i+"optionValue");
}

Thank you.

javascript ajax json drop-down-menu

Answer 1

Answer №1

Zepto is a fantastic alternative to jQuery with its lightweight design and excellent JQ Ajax support. Its compact size can significantly increase efficiency in your development process.

Answer 2

Zepto is a fantastic alternative to jQuery with its lightweight design and excellent JQ Ajax support. Its compact size can significantly increase efficiency in your development process.

Answer 3

Answer №2

If you are in control of the PHP script, one simple method to use is JSON-P.

Here's how it works on the server side:

<?php

$callback = $_GET['callback'];
$jsonData = json_encode($data);
print $callback . '(' . $jsonData . ');';

?>

And here's how it's done on the client side:

<script>

function fetchJSON() {
    var scriptElement = document.createElement('script');
    scriptElement.src = 'http://www.example.com/data.php?callback=handleResponse';
    document.getElementsByTagName('head')[0].appendChild(scriptElement);
}

function handleResponse(jsonData) {
    // process the JSON data accordingly
}

fetchJSON();

</script>

This code snippet demonstrates a basic GET request to a remote page. The page then sends back the JSON data wrapped in a callback function name specified by you, which immediately triggers the handleResponse function with the JSON object as an argument.

Answer 4

If you are in control of the PHP script, one simple method to use is JSON-P.

Here's how it works on the server side:

<?php

$callback = $_GET['callback'];
$jsonData = json_encode($data);
print $callback . '(' . $jsonData . ');';

?>

And here's how it's done on the client side:

<script>

function fetchJSON() {
    var scriptElement = document.createElement('script');
    scriptElement.src = 'http://www.example.com/data.php?callback=handleResponse';
    document.getElementsByTagName('head')[0].appendChild(scriptElement);
}

function handleResponse(jsonData) {
    // process the JSON data accordingly
}

fetchJSON();

</script>

This code snippet demonstrates a basic GET request to a remote page. The page then sends back the JSON data wrapped in a callback function name specified by you, which immediately triggers the handleResponse function with the JSON object as an argument.

Answer 5

Answer №3

If I've understood your query correctly, you're seeking a way to send requests to the server and retrieve data in JSON format without relying on jQuery or any other libraries.

Let's travel back in time to the year 2000 before 'prototype', 'jQuery', and similar frameworks came into existence, when the term 'Ajax' hadn't even been coined (although the concept was already being used).

XmlHttpRequest - An object that facilitates sending asynchronous HTTP requests and receiving responses. Originally designed for XML content by the creators of Microsoft Outlook Web Access, it now supports various MIME types, including JSON. Initially an ActiveX available only in IE, it is now a sub-object of the 'window' top-level object and is supported by all browsers. Both jQuery and most libraries utilize this object for Ajax functionality. For more information and examples, visit: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
XmlHttpRequest only allows requests to be made to the same domain as the page. To work around this limitation, a technique called JSON-P was introduced. By creating a `script` element with its source pointing to another domain, server-generated scripts can pass data as an argument to a callback function implemented in your page. The name of the function becomes part of the URL, like so:

<script type="text/javascript" 
    src="http://blogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myFunc"
    ></script>

Take a look at this example URL (which fetches recent posts from Google's blogpost). Notice how everything is encapsulated within a call to the function `myFunc`, passed as a callback.

You can either embed the `script` element directly into your code, generate it dynamically using `document.write`, or use DOM manipulation to add a `SCRIPT` element to the document.

Answer 6

If I've understood your query correctly, you're seeking a way to send requests to the server and retrieve data in JSON format without relying on jQuery or any other libraries.

Let's travel back in time to the year 2000 before 'prototype', 'jQuery', and similar frameworks came into existence, when the term 'Ajax' hadn't even been coined (although the concept was already being used).

XmlHttpRequest - An object that facilitates sending asynchronous HTTP requests and receiving responses. Originally designed for XML content by the creators of Microsoft Outlook Web Access, it now supports various MIME types, including JSON. Initially an ActiveX available only in IE, it is now a sub-object of the 'window' top-level object and is supported by all browsers. Both jQuery and most libraries utilize this object for Ajax functionality. For more information and examples, visit: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
XmlHttpRequest only allows requests to be made to the same domain as the page. To work around this limitation, a technique called JSON-P was introduced. By creating a `script` element with its source pointing to another domain, server-generated scripts can pass data as an argument to a callback function implemented in your page. The name of the function becomes part of the URL, like so:

<script type="text/javascript" 
    src="http://blogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myFunc"
    ></script>

Take a look at this example URL (which fetches recent posts from Google's blogpost). Notice how everything is encapsulated within a call to the function `myFunc`, passed as a callback.

You can either embed the `script` element directly into your code, generate it dynamically using `document.write`, or use DOM manipulation to add a `SCRIPT` element to the document.

Creating a dropdown menu with data loaded dynamically using ajax and json, all without relying on jquery

Answer №1

Answer №2

Answer №3

Similar questions

Pressing JavaScript buttons to trigger another button

Integrate fullCalendar event creation with Spring MVC using an AJAX request

I'm experiencing difficulty accessing the correct identification number for my questions on the website

Having trouble with JavaScript canvas drawImage function not functioning correctly

Looking to display the "loading....." message on a PHP page?

Do multiple AJAX calls share parameters?

Tips for transferring form data from a React frontend to the backend Node.js server

Organize JSON data based on the timestamp

Define the width of jqgrid

What causes the failure of $event binding when using RowGroup tables with PrimeNG?

Display the query results on a separate blade

Retrieve all documents with a matching objectId field in MongoDB

Images set as the og:image on the following 14 websites hosted on Vercel require authentication to be displayed

Sending a confirmation message after a successful JSON post

List of items displayed in alphabetical order using the ng-repeat directive:-

AngularJS: accessing remote systems - a guide

Showcasing ranges from various input types on a single page

Is there a way to display errors during jQuery validation?

How can we prevent components from rendering in React when their state or props have not changed?

What is the best way to change the size of a QR code