Home > Article > Web Front-end > Implementing HTML-based implementation without refreshing the page after form submission
Implementing HTML-based implementation without refreshing the page after form submission
- 不言Original
- 2018-06-05 14:18:492337browse
Using ajax to implement form submission without refreshing the page is often used in projects. Some time ago, I learned from my master several other methods of submitting forms without refreshing, mainly based on the iframe framework. Now the editor is organizing and sharing the script home platform for your reference
Using ajax to implement form submission without refreshing the page is often used in projects. Some time ago, I learned from my master several other methods of submitting forms without refreshing, mainly based on the iframe framework. Now I’ve sorted it out and shared it with everyone.
First type:
(html page)
HTML CodeCopy content to clipboard
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>无刷新提交表单</title>
<style type="text/css">
ul{ list-style-type:none;}
</style>
</head>
<body>
<iframe name="formsubmit" style="display:none;">
</iframe>
<!-- 将form表单提交的窗口指向隐藏的ifrmae,并通过ifrmae提交数据。 -->
<form action="form.php" method="POST" name="formphp" target="formsubmit">
<ul>
<li>
<label for="uname">用户名：</label>
<input type="text" name="uname" id="uname" />
</li>
<li>
<label for="pwd">密 码：</label>
<input type="password" name="pwd" id="pwd" />
</li>
<li>
<input type="submit" value="登录" />
</li>
</ul>
</form>
</body>
</html>
（PHP页面：form.php）
<?php
//非空验证
if(empty($_POST['uname']) || empty($_POST['pwd']))
{
echo '<script type="text/javascript">alert("用户名或密码为空!");</script>';
exit;
}
//验证密码
if($_POST['uname'] != 'jack' || $_POST['pwd'] != '123456')
{
echo '<script type="text/javascript">alert("用户名或密码不正确!");</script>';
exit;
} else {
echo '<script type="text/javascript">alert("登录成功!");</script>';
exit;
}Second type:
(html page)
HTML CodeCopy content to clipboard
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>iframe提交表单</title>
</head>
<body>
<iframe name="myiframe" style="display:none;" onload="iframeLoad(this);"></iframe>
<form action="form.php" target="myiframe" method="POST">
用户名:<input type="text" name="username" /><br/>
密 码:<input type="password" name="userpwd" /><br/>
<input type="submit" value="登录" />
</form>
<script type="text/javascript">
function iframeLoad(iframe){
var doc = iframe.contentWindow.document;
var html = doc.body.innerHTML;
if(html != ''){
//将获取到的json数据转为json对象
var obj = eval("("+html+")");
//判断返回的状态
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 the clipboard
<?php
//设置时区
date_default_timezone_set('PRC');
/*
返回的提交消息
status:状态
msg:提示信息
*/
$msg = array('status'=>0,'msg'=>'');
//获取提交过来的数据
$name = $_POST['username'];
$pwd = $_POST['userpwd'];
//模拟登录验证
$user = array();
$user['name'] = 'jack';
$user['pwd'] = 'jack2014';
if($name != $user['name']){
$msg['msg'] = '该用户未注册!';
$str = json_encode($msg);
echo $str;
exit;
}else if($pwd != $user['pwd']){
$msg['msg'] = '输入的密码错误!';
$str = json_encode($msg);
echo $str;
exit;
}
$msg['msg'] = '登录成功!';
$msg['status'] = 1;
$str = json_encode($msg);
echo $str;The above content is the relevant content introduced by the editor based on HTML to achieve no page refresh after form submission. I hope it will be useful to everyone. help!
Related recommendations:
A variety of examples of how to use HTML forms
##
The above is the detailed content of Implementing HTML-based implementation without refreshing the page after form submission. For more information, please follow other related articles on the PHP Chinese website!