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

<!DOCTYPE HTML>
<html lang="en- US " >
<head>
<meta charset= "utf-8" >
<title>Submit the form without refreshing</title>
<style type= "text/css" >
ul{ list-style-type:none;}
</style>
</head>
<body>
<iframe name= "formsubmit" style= "display:none;" >
</iframe>
<form action= "form.php" method= "POST" name= "formphp" target= "formsubmit" >
<ul>
<li>
<label for = "uname" >Username: </label>
<input type= "text" name= "uname" id= "uname" />
</li>
<li>
<label for = "pwd" >Password:</label>
<input type= "password" name= "pwd" id= "pwd" />
</li>
<li>
<input type= "submit" value= "Login" />
</li>
</ul>
</form>
</body>
</html>
(PHP page: form.php)
<?php
// Non-empty verification
if (empty($_POST[ 'uname' ]) || empty($_POST[ 'pwd' ]))
{
echo '<script type="text/javascript">alert("Username or password is empty!");</script>' ;
exit;
}
//Verify password
if ($_POST[ 'uname' ] != 'jack' || $_POST[ 'pwd' ] != '123456' )
{
echo '<script type="text/javascript">alert("Incorrect username or password!");</script>' ;
exit;
} else {
echo '<script type="text/javascript">alert("Login successful!");</script>' ;
exit;
}

Second type:
(html page)

HTML CodeCopy content to clipboard

<!DOCTYPE HTML>
<html lang="en- US " >
<head>
<meta charset= "utf-8" >
<title>iframe submit form</title>
</head>
<body>
<iframe name= "myiframe" style= "display:none;" onload= "iframeLoad(this);" ></iframe>
<form action= "form.php" target= "myiframe" method= "POST" >
Username:<input type= "text" name= "username" /><br/>
Password:<input type= "password" name= "userpwd" /><br/>
<input type= "submit" value= "Login" />
</form>
<script type= "text/javascript" >
function iframeLoad(iframe){
var doc = iframe.contentWindow.document;
var html = doc.body.innerHTML;
if (html != '' ){
//Convert the obtained json data into a json object
var obj = eval( "(" +html+ ")" );
//Judge the returned status
if (obj.status < 1){
alert(obj.msg);
} else {
alert(obj.msg);
window.location.href = "http://www.baidu.com" ;
}
}
}
</script>
</body>
</html>

(PHP page: form.php)

XML/HTML CodeCopy content to clipboard

<? php
//Set the time zone
date_default_timezone_set('PRC');
/*
Returned commit message
status: status
msg: prompt message
*/
$ msg = array ('status'= > 0, 'msg'= > '');
//Get the submitted data
$ name = $_POST['username'];
$ pwd = $_POST['userpwd'];
//Simulate login verification
$ user = array ();
$user['name'] = 'jack';
$user['pwd'] = 'jack2014';
if($name != $user['name']){
$msg['msg'] = 'The user is not registered!';
$ str = json_encode ($msg);
echo $str;
exit;
}else if($pwd != $user['pwd']){
$msg['msg'] = 'The password you entered is wrong!';
$ str = json_encode ($msg);
echo $str;
exit;
}
$msg['msg'] = 'Login successful!';
$msg['status'] = 1;
$ str = json_encode ($msg);
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