Making Ajax Call to Get a Random Quote

by vigneshchennai74 Updated: Mar 21, 2023

Guide Kit

"Making Ajax Call to Get a Random Quote" is a piece of code that uses AJAX (Asynchronous JavaScript and XML) to request the Forismatic API and retrieve a random quote in JSONP format.

The code uses jQuery to simplify the process of making an AJAX request. When the "Get Message" button is clicked, the load function is called, which uses jQuery's ajax method to request the Forismatic API endpoint. Once the response is received, the success callback function is executed, which extracts the quoted text from the JSONP response and updates the content of the HTML element with the class "message" to display the quote.

This code can help create dynamic content on a webpage. By making an AJAX request to an API, it is possible to retrieve data from a remote source and display it on the page without the need to refresh the entire page. In this case, the code allows the user to retrieve a random quote with the click of a button, adding an interactive element to the webpage.

Preview of the output that you will get on running this code from your IDE

Code

In this solution we have used the "load" function is responsible for making the AJAX call in this code

Getting JSON with the jQuery getJSON Method

Lines of Code : 39License : Strong Copyleft (CC BY-SA 4.0)

Dependent Libraries :

    <html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
      $(document).ready(function() {
    
    
    
    $( function() {   
      $('#getMessage').on( 'click', function(){ 
        load();
         } );  
    });
                   
                    var linkUrl = "https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en";
                    var load = function() {
                            $.ajax(
                            {
                                    dataType : "jsonp",
                                    jsonp : "jsonp",
                                    url : linkUrl,
                                    success : function(response){
                                            $(".message").html(response.quoteText);
                                    }
                            });
                    };
    
      });
    </script>
    </head>
    <body>
          <div class = "col-xs-12 well message">
          The message will go here
        </div>
            <button id = "getMessage" class = "btn btn-primary">
            Get Message
          </button>
    </body>
    </html>

Instructions

Download and install VS Code on your desktop.
Open VS Code and create a new file in the editor.
Copy the code snippet that you want to run, using the "Copy" button or by selecting the text and using the copy command (Ctrl+C on Windows/Linux or Cmd+C on Mac).
Paste the code into your file in VS Code, and save the file with a meaningful name and the appropriate file extension (.html for HTML, .js for JavaScript, etc.).
To run the code, open the file in VS Code and click the "Run" button in the top menu, or use the keyboard shortcut Ctrl+Alt+N (on Windows and Linux) or Cmd+Alt+N (on Mac). The output of your code will appear in the VS Code output console.

I hope you found this useful. I have added the version information in the following sections.

I found this code snippet by searching for Getting JSON with the jQuery getJSON Method in kandi. You can try any such use case!

Environment Tested

Tested this solution in the following versions. Be mindful of changes when working with other versions.

Visual Studio Code Version 1.76.0

This code can be helpful for creating dynamic content on a webpage. This process also facilities an easy-to-use, hassle-free method to create a hands-on working version of code which would help us to do make AJAX call

Support

Open Weaver – Develop Applications Faster with Open Source

Terms
Privacy policy

Making Ajax Call to Get a Random Quote

Code

Instructions

Environment Tested

Support

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow