One Versatile Ajax Function for Accessing Various PHP Pages

Question

One Versatile Ajax Function for Accessing Various PHP Pages

On my index.html, there are buttons displayed below:

<button value="about_us.php" onClick="fNt(value)">About Us</button>
<button value="faq.php" onClick="fNt(value)">FAQ</button>
<button value="contact_us.php" onClick="fNt(value)">Contact Us</button>

I want to use AJAX to fetch information from PHP pages based on the button clicked. Instead of creating separate AJAX functions for each page, I am looking for a more efficient solution to handle multiple buttons without consuming too much space.

Is it possible to achieve something like the following?

<script>
function fNt(value) {
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", value, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200 {
document.getElementById("ajax").innerHTML = xmlhttp.responseText;}}}
</script>

I understand that the script above is not functional, but it illustrates what I'm trying to accomplish. Any suggestions on how to make this work? Your help would be greatly appreciated.

javascript ajax

Answer 1

Answer №1

Feel free to give this a try, it might come in handy...

function fetchData(url) {
  request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.send();
  request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
      document.getElementById("ajax").innerHTML = request.responseText;
    }
  }
}

<button onClick="fetchData('about_us.php')">About Us</button>
<button onClick="fetchData('faq.php')">FAQ</button>
<button onClick="fetchData('contact_us.php')">ContactUs</button>

Enjoy your coding journey!

Answer 2

Feel free to give this a try, it might come in handy...

function fetchData(url) {
  request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.send();
  request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
      document.getElementById("ajax").innerHTML = request.responseText;
    }
  }
}

<button onClick="fetchData('about_us.php')">About Us</button>
<button onClick="fetchData('faq.php')">FAQ</button>
<button onClick="fetchData('contact_us.php')">ContactUs</button>

Enjoy your coding journey!

Answer 3

Answer №2

In any case, it is essential to create a distinct callback for each button, unless the intention is for all buttons to trigger the same action when clicked. To streamline this process, consider encapsulating the uniform ajax code within a function and passing a URL along with a separate callback function to it. If you need to verify the status of the request object, simply pass it directly to the callback:

function executeRequest(url, callback){
    var xhr = new XMLHttpRequest(),
        method = "GET",
        route = url; //Adjust the URL if necessary

    xhr.open(method, route, true);
    xhr.onreadystatechange = callback(xhr);
    xhr.send();
}

To use this function:

var url = "desiredroute.com";
var customCallback = function(xhrObject){
   if (xhrObject.readyState == 4 && xhrObject.status == 200{
       console.log("SUCCESS")
   }
}

Another Approach

If the goal is to have different actions for each link, you can modify the executeRequest function by including the route in the callback function:

function executeRequest(route){

    var xhr = new XMLHttpRequest(),
        method = "GET",
        url = route; //Adjust the URL if necessary

    var specificCallback = function(routeParam){
       if (xhr.readyState == 4 && xhr.status == 200{
           switch(routeParam){
              case "faq.php":{
                 //perform specific action for "faq.php"
              }
              break;
              //continue with similar logic for other URLs
           }
        }
    }

    xhr.open(method, url, true);
    xhr.onreadystatechange = specificCallback(route);
    xhr.send();
}

To call this function:

<button onClick="executeRequest('about_us.php')">About Us</button>
<button onClick="executeRequest('faq.php')">FAQ</button>
<button onClick="executeRequest('contact_us.php')">Contact Us</button>

Ultimately, there are various ways to structure this process efficiently and reduce the amount of code required. The approach taken will largely depend on post-request actions.

Answer 4

In any case, it is essential to create a distinct callback for each button, unless the intention is for all buttons to trigger the same action when clicked. To streamline this process, consider encapsulating the uniform ajax code within a function and passing a URL along with a separate callback function to it. If you need to verify the status of the request object, simply pass it directly to the callback:

function executeRequest(url, callback){
    var xhr = new XMLHttpRequest(),
        method = "GET",
        route = url; //Adjust the URL if necessary

    xhr.open(method, route, true);
    xhr.onreadystatechange = callback(xhr);
    xhr.send();
}

To use this function:

var url = "desiredroute.com";
var customCallback = function(xhrObject){
   if (xhrObject.readyState == 4 && xhrObject.status == 200{
       console.log("SUCCESS")
   }
}

Another Approach

If the goal is to have different actions for each link, you can modify the executeRequest function by including the route in the callback function:

function executeRequest(route){

    var xhr = new XMLHttpRequest(),
        method = "GET",
        url = route; //Adjust the URL if necessary

    var specificCallback = function(routeParam){
       if (xhr.readyState == 4 && xhr.status == 200{
           switch(routeParam){
              case "faq.php":{
                 //perform specific action for "faq.php"
              }
              break;
              //continue with similar logic for other URLs
           }
        }
    }

    xhr.open(method, url, true);
    xhr.onreadystatechange = specificCallback(route);
    xhr.send();
}

To call this function:

<button onClick="executeRequest('about_us.php')">About Us</button>
<button onClick="executeRequest('faq.php')">FAQ</button>
<button onClick="executeRequest('contact_us.php')">Contact Us</button>

Ultimately, there are various ways to structure this process efficiently and reduce the amount of code required. The approach taken will largely depend on post-request actions.

One Versatile Ajax Function for Accessing Various PHP Pages

Answer №1

Answer №2

Similar questions

Incorporating visuals into dynamic circles that are in motion and interacting

Using Javascript to modify file permissions in Google Drive

The Gulp task is stuck in an endless cycle

:host background color may be missing, but the font size has been boosted?

What is the best way to make message properties accessible to the public while also being able to access them within a web

Tips for transforming a Vue 2 website into a progressive web application (PWA) were requested

Tips for showing chosen options in react-select multi component?

Would it be considered acceptable practice to implement a setTimeout on the loading state to ensure that the log in page does not momentarily appear before the user has completed the authentication process?

Ways to observe redux action flow within a component

Tips on gathering information from an HTML for:

What are the steps to generate an npm package along with definition files?

Transform an array of arrays object with multiple depths into an array of objects

Can someone provide guidance on creating a calculator using the Switch statement in Javascript?

How can I retrieve the transformation matrix for a DOM element?

Error in AngularJS and TypeScript: Property 'module' is undefined and cannot be read

What could be the issue with my interactive dropdown menu?

Appending a JSON object to an array does not result in the object being added to the

Tips for boosting the efficiency of nested ng-repeat in AngularJS

Exploring the power of AJAX/XMLHttpRequest and the sweet simplicity of

Experimenting with Chai in JavaScript to test an incorrect argument