Implementing form submission without refreshing the page based on HTML

Implementing form submission without refreshing the page based on HTML
Using ajax to implement form submission without refreshing the page is often used in projects. Some time ago, I learned several other methods of submitting forms without refreshing from my master, which are mainly based on the iframe framework. Now I’ve sorted it out and shared it with everyone.
The first one:
 (html page)
HTML CodeCopy content to clipboard
  1. <!DOCTYPE HTML>
  2. <html lang="en- US " >
  3. <head>
  4. <meta charset= "utf-8" >
  5. <title>Submit the form without refreshing</title>
  6. <style type= "text/css" >
  7. ul{ list-style-type:none;}
  8. </style>
  9. </head>
  10. <body>
  11. <iframe name= "formsubmit" style= "display:none;" >
  12. </iframe>
  13. <!-- Point the form submission window to the hidden ifrmae and submit the data through ifrmae. -->
  14. <form action= "form.php" method= "POST" name= "formphp" target= "formsubmit" >
  15. <ul>
  16. <li>
  17. <label for = "uname" >Username: </label>
  18. <input type= "text" name= "uname" id= "uname" />
  19. </li>
  20. <li>
  21. <label for = "pwd" >Password:</label>
  22. <input type= "password" name= "pwd" id= "pwd" />
  23. </li>
  24. <li>
  25. <input type= "submit" value= "Login" />
  26. </li>
  27. </ul>
  28. </form>
  29. </body>
  30. </html>
  31.   
  32. (PHP page: form.php)
  33.   
  34. <?php
  35. // Non-empty verification   
  36. if (empty($_POST[ 'uname' ]) || empty($_POST[ 'pwd' ]))
  37. {
  38. echo '<script type="text/javascript">alert("Username or password is empty!");</script>' ;
  39. exit;
  40. }
  41. //Verify password   
  42. if ($_POST[ 'uname' ] != 'jack' || $_POST[ 'pwd' ] != '123456' )
  43. {
  44. echo '<script type="text/javascript">alert("Incorrect username or password!");</script>' ;
  45. exit;
  46. } else {
  47. echo '<script type="text/javascript">alert("Login successful!");</script>' ;
  48. exit;
  49. }


Second type:
(html page)

HTML CodeCopy content to clipboard
  1. <!DOCTYPE HTML>
  2. <html lang="en- US " >
  3. <head>
  4. <meta charset= "utf-8" >
  5. <title>iframe submit form</title>
  6. </head>
  7. <body>
  8. <iframe name= "myiframe" style= "display:none;" onload= "iframeLoad(this);" ></iframe>
  9. <form action= "form.php" target= "myiframe" method= "POST" >
  10. Username:<input type= "text" name= "username" /><br/>
  11. Password:<input type= "password" name= "userpwd" /><br/>
  12. <input type= "submit" value= "Login" />
  13. </form>
  14. <script type= "text/javascript" >
  15. function iframeLoad(iframe){
  16. var doc = iframe.contentWindow.document;
  17. var html = doc.body.innerHTML;
  18. if (html != '' ){
  19. //Convert the obtained json data into a json object   
  20. var obj = eval( "(" +html+ ")" );
  21. //Judge the returned status   
  22. if (obj.status < 1){
  23. alert(obj.msg);
  24. } else {
  25. alert(obj.msg);
  26. window.location.href = "http://www.baidu.com" ;
  27. }
  28. }
  29. }
  30. </script>
  31. </body>
  32. </html>

(PHP page: form.php)

XML/HTML CodeCopy content to clipboard
  1. <? php     
  2. //Set the time zone
  3. date_default_timezone_set('PRC');
  4. /*
  5. Returned commit message
  6. status: status
  7. msg: prompt message
  8. */
  9. $ msg = array ('status'= > 0, 'msg'= > '');
  10. //Get the submitted data
  11. $ name = $_POST['username'];
  12. $ pwd = $_POST['userpwd'];
  13. //Simulate login verification
  14. $ user = array ();
  15. $user['name'] = 'jack';
  16. $user['pwd'] = 'jack2014';
  17. if($name != $user['name']){
  18. $msg['msg'] = 'The user is not registered!';
  19. $ str = json_encode ($msg);
  20. echo $str;
  21. exit;
  22. }else if($pwd != $user['pwd']){
  23. $msg['msg'] = 'The password you entered is wrong!';
  24. $ str = json_encode ($msg);
  25. echo $str;
  26. exit;
  27. }
  28. $msg['msg'] = 'Login successful!';
  29. $msg['status'] = 1;
  30. $ str = json_encode ($msg);
  31. echo $str;

The above content is what the editor introduced to you about how to implement non-refresh page after form submission based on HTML. I hope it will be helpful to you!

<<:  Detailed explanation of overflow:auto usage

>>:  Detailed process of upgrading gcc (version 10.2.0) under CentOS7 environment

Recommend

Window environment configuration Mysql 5.7.21 windowx64.zip free installation version tutorial detailed explanation

1. Download mysql-5.7.21-windowx64.zip from the o...

Talking about the practical application of html mailto (email)

As we all know, mailto is a very practical HTML ta...

Div adaptive height automatically fills the remaining height

Scenario 1: Html: <div class="outer"...

Navicat cannot create function solution sharing

The first time I wrote a MySQL FUNCTION, I kept g...

The whole process of installing gogs with pagoda panel and docker

Table of contents 1 Install Docker in Baota Softw...

How to configure Linux CentOS to run scripts regularly

Many times we want the server to run a script reg...

Vue implements nested routing method example

1. Nested routing is also called sub-routing. In ...

Several common ways to deploy Tomcat projects [tested]

1 / Copy the web project files directly to the we...

Syntax alias problem based on delete in mysql

Table of contents MySQL delete syntax alias probl...

Implementation of MySQL scheduled backup script under Windows

On a Windows server, if you want to back up datab...

Implementation of master-slave replication in docker compose deployment

Table of contents Configuration parsing Service C...

How to set the default value of a MySQL field

Table of contents Preface: 1. Default value relat...

CSS3 uses the transition property to achieve transition effects

Detailed description of properties The purpose of...

Detailed explanation of the latest IDEA process of quickly deploying and running Docker images

background Use idea with docker to realize the wh...

Alibaba Cloud Server Tomcat cannot be accessed

Table of contents 1. Introduction 2. Solution 2.1...