Maison >interface Web >tutoriel HTML >Implémentation d'une implémentation basée sur HTML sans actualiser la page après la soumission du formulaire
Implémentation d'une implémentation basée sur HTML sans actualiser la page après la soumission du formulaire
- 不言original
- 2018-06-05 14:18:492342parcourir
L'utilisation d'ajax pour implémenter la soumission de formulaire sans actualiser la page est souvent utilisée dans les projets. Il y a quelque temps, j'ai appris auprès de mon maître plusieurs autres méthodes de soumission de formulaires sans rafraîchissement, basées principalement sur le framework iframe. Maintenant, l'éditeur a compilé et partagé la plateforme d'accueil des scripts pour votre référence
L'utilisation d'ajax pour implémenter la soumission de formulaire sans actualiser la page est souvent utilisée dans les projets. Il y a quelque temps, j'ai appris auprès de mon maître plusieurs autres méthodes de soumission de formulaires sans rafraîchissement, basées principalement sur le framework iframe. Maintenant, je l’ai réglé et je l’ai partagé avec tout le monde.
Premier type :
(page html)
Code HTMLCopier le contenu dans le presse-papiers
<!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;
}Deuxième type :
(page html)
Code HTMLCopier le contenu dans le presse-papiers
<!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>(Page PHP : form.php)
XML/ Code HTMLCopiez le contenu dans le presse-papiers
<?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;Le contenu ci-dessus est le contenu pertinent que l'éditeur vous présente en fonction du HTML pour éviter toute actualisation de la page après la soumission du formulaire . , j'espère que cela aidera tout le monde !
Recommandations associées :
Une variété d'exemples sur la façon d'analyser les formulaires HTML
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!