Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Are HTML Pages Really Static? Think Again!

DZone's Guide to

Are HTML Pages Really Static? Think Again!

Think that HTML pages can only be static... think again! Check out this example of a simple dynamic operation with an HTML page.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

According to the definition of a static page, it shows information exactly as it is stored. So if you are building a page that shows information from the database (dynamic), then you will use a server side page like .php/.aspx/.cshtml.

As a web developer, I have heard quite often that, "An HTML page is a static page, so it cannot be used to show dynamic contents." This sounds fair but it is not totally correct. So let's discuss why an HTML page is not really a static one.

A Simple Dynamic Operation With an HTML Page

Let's make a simple yet powerful operation with an HTML page. Here we have to make a feature through which a user is able to subscribe to a blog. This feature is quite common on the internet!

You will have an "input" and a "button." The user will enter his/her email and click the button. Upon clicking the button, his/her email should be inserted into the database table and he/she should get a thank you message.

The HTML Page Code:

<input id="email" placeholder="Email Address" />
<button id="submit">Submit</button>
<div id="message"></div>

Note: The final message is inside the "message" div.

Making the HTML Page Dynamic

Now, the problem we face is how to insert the email in the database and show the thank you message. The answer is through a jQuery AJAX Method.

This is the main catch here! With jQuery AJAX, we can send the email value to a PHP page and this PHP page will insert it to the database and return the thank you message.

We will call the jQuery AJAX method in the button click event and simply post the email value to the PHP page.

Below is our jQuery AJAX code:

$("#submit").click(function (e) {    
    $.ajax({
        type: "POST",
        url: "result.php",
        contentType: "application/json; charset=utf-8",
        data: '{"email":"' + $("#email").val() + '"}',
        success: function (msg) {
                $("#message").html(msg);
        },
        error: function (req, status, error) {
            alert(req + " " + status + " " + error);
        }
    });
    return false;
});

Explanation: In the above jQuery AJAX method code, we pass the "result.php" to the "url" key. This is the PHP page which will get the email value. 

The "data" key will pass the email input value.

The "success" key defines the function that will be called when the AJAX request is called. Inside this function, we receive the returned value from the PHP page and put it in the "message" div.

The "error" key defines the function which will be called in case there is some error during the AJAX call.

Finally the PHP Page...

<?php 
$email = $_REQUEST['email']; 
//Make database operations and insert the email value in the database. 
//If insert operation is successful echo "You are subscribed." 
//else "Something went wrong. Try again.". 
//I am assuming that the operation is successful and so returning the 
//"You are subscribed." message back to jQuery AJAX method. echo "Thank You !"; 
?>

The PHP page just gets the email values, inserts it into the database, and sends back the thank you message.

Now if any web developer tells you that an HTML page cannot be used to show dynamic contents. Tell that person politely, “You are wrong, there is another way!"

With jQuery AJAX an HTML page can work like a server page. You can use it, to make any sort of database application right from the HTML page.

Happy Coding!

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
html ,jquery ,ajax ,web development

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}