Dynamic content loading on web pages with Ajax & Express (4)

It is the fourth example using JQuery AJAX function and Express JS.

This example sets up a multi-page site where clicking on the buttons triggers AJAX requests to retrieve and display different content within the <main> element of the page. The content is dynamically loaded without requiring a full page refresh, providing a smoother user experience.

To implement the desired functionality, follow these steps:

Create a static HTML page named “site.html” in the “public” folder of your project. The page should include a level 1 heading with the text “My AJAX Site”, three buttons labeled “Contact,” “Search,” and “About,” and an empty <main> element to hold the content.
Write JavaScript code to handle button clicks and send AJAX requests to the corresponding routes: /contact.ajax, /search.ajax, and /about.ajax. When a button is clicked, the code should retrieve the response from the server and replace the existing content in the <main> element.
Create express routes in a server file (server4.js) to handle the three HTTP GET requests: /contact.ajax, /search.ajax, and /about.ajax. For each route, define the response content as follows:
- For /contact.ajax, send back an <a> tag containing a link to an email address.
- For /search.ajax, send back a text input and a search button.
- For /about.ajax, send back a paragraph enclosed in <p> tags that describes AJAX.

<!-- site.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Multi-page Site</title>
  <script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
  <h1>Multi-page Site</h1>
  <button id="contact-btn">Contact</button>
  <button id="search-btn">Search</button>
  <button id="about-btn">About</button><br><br>
  <main id="content"></main>

  <script>
    $(document).ready(function() {
      var contentElement = $('#content');

      function loadContent(url) {
        $.ajax({
          url: url,
          method: 'GET',
          success: function(response) {
            contentElement.html(response);
          },
          error: function() {
            console.log('Error occurred while loading content.');
          }
        });
      }

      $('#contact-btn').click(function() {
        loadContent('/contact.ajax');
      });

      $('#search-btn').click(function() {
        loadContent('/search.ajax');
      });

      $('#about-btn').click(function() {
        loadContent('/about.ajax');
      });
    });
  </script>
</body>
</html>

Here’s a breakdown of some codes:

Content Container: The <main> element with the ID “content” serves as a container for dynamic content that will be loaded via AJAX requests.
Script Section: The JavaScript code enclosed within the <script> tags is executed when the document is ready. It sets up event listeners for button clicks and defines the loadContent function. This function makes AJAX requests using jQuery’s $.ajax() method to retrieve content from specific URLs. The retrieved content is then inserted into the <main> element, replacing any existing content.

Content of the server4.js

const express = require('express');
const app = express();
const port = 3000;

app.get('/contact.ajax', function(req, res) {
  var emailLink = '<a href="mailto:somebody@gmail.com">Contact Email</a>';
  console.log('contact route accessed') 
  res.send(emailLink);
});

app.get('/search.ajax', function(req, res) {
  var searchForm = '<input type="text" name="search" placeholder="Enter search term">' +
                   '<button type="submit">Search</button>';
  console.log('search route accessed')				   
  res.send(searchForm);
});

app.get('/about.ajax', function(req, res) {
  var aboutContent = '<p>AJAX (Asynchronous JavaScript and XML) allows for seamless, dynamic communication between the client and server. It enables the retrieval and display of data without requiring a page refresh, resulting in a faster and more interactive user experience.</p>';
  console.log('About route accessed')
  res.send(aboutContent);
});

app.use(express.static('public'));

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

The appropriate file structure should resemble the following:

- public
  - site.html
  - js
    - jquery-3.7.1.min.js
- server4.js

Run the Express application by executing the following command in the Ubuntu terminal:

node server4.js

Make sure both Orange Pi and PC have the same subnet and connect to the same router or network switch. On the PC’s web browser, enter the following URL where 192.168.21.26 is the IP address of the Orange Pi.

http://192.168.21.26:3000/site.html

Dynamic content loading on web pages with Ajax & Express (4)

Related posts: