Let's define a static page together, that is, "the information displayed on the page is exactly the same as the storage structure." Therefore, if you want to build a dynamic page that displays database information, you need to use server-side language rendering, such as .php/.aspx/.jsp/.servlet and so on.
As a web developer, I often hear "HTML is fast", "HTML cannot display dynamic content", etc. This sounds reasonable, but it is not entirely correct.
Below we discuss why HTML pages are not really static pages.
Using HTML pages for dynamic processing
Let's use HTML pages for interactive operations. Here, we will create a user subscription function. As you all know, this function is very common on the Internet.
The interactive function is described as follows:
there is an Email text input form and a submit button on the page. After the user enters the TA's mailbox and clicks the submit button, the email will be stored in the database table and the user will receive a thank you message.
The HTML page code is as follows:
<input id="email" placeholder = "your email address" /> <button id="submit" >Submit</button> <div id = "message"> </div>
Note: The returned prompt message "Thank you" will be displayed in the DIV of the message.
Let the static page be static The
next thing we want to accomplish is how to insert an email in the data and display the thank you message, we use the JQuery library to achieve.
Just use the capture event, call the Ajax method of JQuery on the event, and post the email address to the PHP script.
The following is our JQuery 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;
});
To illustrate, in the above JQuery method, we pass the key value of the url to the result.php page, which will receive the content of the email.
That is, the value of data. For details, please see Carbon's Ajax code. The user's email will be sent by key-value.
After the Ajax request is completed, PHP will return success to the callback function. I write the value received by the callback function from the PHP page into the message div.
If some errors occur during the Ajax call, the callback function in the "error" section is called.
Here is the content of our PHP page:
<?php $email = $_REQUEST['email']; //If the database is inserted, it will return success //If it is not successful, it will return wrong, Try again ?>
I saved some code in the PHP script, and smart readers can do it by themselves. Its main task is to receive the email value, insert it into the database, and then return a success message.
At this point, our code part ends here.
Now, if any developer tells you that HTML pages cannot be used to display dynamic content, please tell that person politely, there is another way!
We use JQuery Ajax, HTML pages can work like server pages, and people can easily use them to create any type of database application directly with HTML pages.
Wish you all have a good time coding and don’t forget to like this tutorial! ~