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

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 content." This sounds fair but it is not totally correct. Let's discuss why an HTML page is not really a static page.

A Simple Dynamic Operation With an HTML Page

Let's make a simple yet powerful operation with an HTML page. Here I will 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" control.  The user will enter his/her email and click the button. On clicking the button, his/her email should be stored on the database table, and he/she should receive 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 (thank you), will be shown inside the "message" div.

Making the HTML Page Dynamic

Now the problem, which 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, I can send the email value to a PHP page, and this PHP page, in turn, will insert it into the database, and then return the thank you message.

I will call the jQuery AJAX method on 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, I am passing the "url" key to the  "result.phppage. This PHP page which will receive the email value. 

The "data" values (see the jQuery AJAX code), will pass the email's input control value filled by the user.

The "success" callback function that will be called when the AJAX request finishes successfully. I receive the returned value from the PHP page in this callback function and then put it in the "message" div.

The "error" callback function is 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 receives the email values, inserts it into the database, and sends back the thank you message.

This concludes the code portion. Now, if any web developer tells you that an HTML page cannot be used to show dynamic content, 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 and don't forget to like this tutorial!

Topics:
html ,jquery ,ajax ,web dev ,tutorial.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}