Approach to manage redirect request with JQuery

Server-Side Redirect:
- The server-side code responds with an HTTP status code (usually 3xx) that indicates a redirect.
- The server provides the new URL in the response header.
- In the AJAX success function, you can check the status code and the new URL and use JavaScript to redirect the user to the new location.
JavaScript-Based Redirect:
- Instead of relying on the server to perform the redirect, you can handle it in the JavaScript success function.
- The server responds with a custom JSON object containing the redirect URL.
- In the success function, you can extract the URL from the JSON response and use the window. location to redirect the user.

Example 1: In this example, creating the basic project of Server-Side Redirect

Javascript

document.getElementById("ajaxButton").addEventListener("click", function () {
    // Make an AJAX request to a sample server
    $.ajax({
        // You can use any publicly available API
        url: "https://jsonplaceholder.typicode.com/posts/1",
        type: "GET",
        success: function (data) {
            // Handle the success response
            console.log("Received data:", data);
 
            // Extract the URL and redirect
            setTimeout(() => {
                // Use a publicly accessible URL for testing
                var redirectUrl = "https://www.example.com";
                window.location.href = redirectUrl;
                // redirect after 1 seconds
            }, 1000)
        },
        error: function (error) {
            // Handle errors
            console.error("Error:", error);
        }
    });
});

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>AJAX Redirect Test</title>
    <!-- Include jQuery via a CDN -->
    <style>
        button {
            background-color: rebeccapurple;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
    </style>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
      </script>
</head>
 
<body>
    <h1>AJAX Redirection</h1>
    <button id="ajaxButton">
          Make AJAX Request
      </button>
    <script src="script.js"></script>
</body>
 
</html>

Output: A small demonstration of the above code is given below:

Output

Example 2: Fetching GitHub User Details with AJAX and Redirect

In this example, I will demonstrate how to use AJAX to fetch GitHub user details, including the user’s profile image, the number of commits (public repositories), and the number of PRs (pull requests). After fetching and displaying these details, I have implemented a redirection feature to redirect the user to a different webpage after a specified time.

Javascript

document.getElementById("ajaxButton").addEventListener("click", function () {
    let githubUsername = "adarsh-jha-dev"; // my github username , you can try this with your's too
 
    console.log("Button clicked! Fetching user details...");
 
    $.ajax({
        url: `https://api.github.com/users/${githubUsername}`,
        type: "GET",
        success: function (userData) {
            console.log("Received user data:", userData);
 
            $("#profileImage").attr("src", userData.avatar_url);
            $("#commitsCount").text(userData.public_repos);
            $("#prsCount").text(userData.public_gists);
            $("#streakCount").text("N/A");
 
            console.log("User details displayed.");
 
            $("#userDetails").show();
 
            setTimeout(function () {
                console.log("Redirecting to Example Webpage...");
                window.location.href = `https://github.com/${githubUsername}`;
            }, 1000); // redirecting after 7 seconds
        },
        error: function (error) {
            console.error("Error:", error);
        }
    });
});

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>AJAX Redirect to GitHub Profile</title>
    <style>
        button {
            background-color: rebeccapurple;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
 
        #userDetails {
            display: none;
            /* Initially hidden */
        }
 
        #profileImage {
            width: 100px;
            height: 100px;
        }
    </style>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
      </script>
</head>
 
<body>
    <h1>AJAX Redirect to GitHub Profile</h1>
    <button id="ajaxButton">
          Fetch GitHub User Details
      </button>
    <div id="userDetails">
        <h2>User Details:</h2>
        <img id="profileImage" src="" alt="Profile Image">
        <p>Commits: <span id="commitsCount"></span></p>
        <p>PRs: <span id="prsCount"></span></p>
        <p>Streak: <span id="streakCount"></span></p>
    </div>
    <script src="./script.js"></script>
</body>
 
</html>

Output: A small video demonstration of the above code is given below :

Output

How to manage a redirect request after a jQuery Ajax call?

In web development, making AJAX (Asynchronous JavaScript and XML) requests is a common practice to fetch or send data from a server without the need to refresh the entire web page. While handling responses from these requests is usually straightforward, managing a redirect request after an AJAX call can be a bit tricky. In this article, we will explore how to handle and manage a redirect request after a jQuery AJAX call.

Table of Content

Approach to manage redirect request with JQuery:
FAQs
Conclusion

Syntax:

$.ajax({
  url: 'your_server_endpoint',
  type: 'GET', // or 'POST' for sending data
  data: { /* your data */ },
  success: function(data) {
    // Handle the successful response here
  },
  error: function(error) {
    // Handle errors here
  }
});

Tags:

#Geeks Premier League 2023 #Geeks Premier League #JQuery #Web Technologies

FAQs:

Approach to manage redirect request with JQuery

Javascript

HTML

Javascript

HTML

How to manage a redirect request after a jQuery Ajax call?

Similar Reads

Contact Us