关于php:iframe无刷新提交表单iframe仿ajax提交表单

应用 ajax 能够实现无刷新提交表单，但有人示意 ajax 的效率不行，或者是其余毛病，例如客户端臃肿，太多客户段代码造成开发上的老本，如果网速慢，则会呈现 ajax 申请迟缓，页面空白的状况，对客户的体验不好。ajax 申请不利于搜索引擎优化，个别搜不到 ajax 增加到页面的信息。

这次就介绍一下 iframe 仿造 ajax 异步申请，实际上 iframe 是同步申请，只是把提交的跳转，产生在 iframe 的可视区域内。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>iframe 提交表单 </title>
    <meta charset="utf-8">
    <style type="text/css">
        #result{
            border: none; /* 去掉默认的边框 */
            width: 300px; /* 可视区域的宽度 */
            height: 60px; /* 可视区域的高度 */
        }
    </style>
</head>
<body>
<!-- 表单 -->
<h1>iframe 提交表单 </h1>
<form action="check.php" method="post" target='result'>
    <input type="text" class="input_css" name="user" placeholder="请输出账号"><br/>
    <input type="password" class="input_css" name="pwd" placeholder="请输出明码"><br/>
    <input type="submit" class="formbtn" value="登陆"><br/>
</form>

<!-- 用于查看提交后果 -->
<iframe name='result' id="result" scrolling="no"></iframe>
</body>
</html>

check.php

<style type="text/css">
*{
    margin:0;
    padding:0;
}
</style>
<?php
// 设置编码
header("Content-type:text/html;charset=utf-8");

// 取得 POST 过去的登陆所需参数
$user = $_POST["user"];
$pwd = $_POST["pwd"];

// 过滤参数
if ($user == ''&& $pwd =='') {echo "<p style='color:#f00;font-size:15px;margin-top:10px;'> 账号和明码不得为空 </p>";}else if ($user == '') {echo "<p style='color:#f00;font-size:15px;margin-top:10px;'> 账号不得为空 </p>";}else if ($pwd == '') {echo "<p style='color:#f00;font-size:15px;margin-top:10px;'> 明码不得为空 </p>";}else{echo "<p style='color:#000;font-size:15px;margin-top:10px;'> 你提交的账号是：".$user."<br/> 你提交的明码是：".$pwd."</p>";}
?>

http://www.likeyunba.com/demo…

Author:TANKING
Date:2021-01-13
Wechat:sansure2016
Web:http://www.likeyun.cn/
Qrcode:Join in

关于php:iframe无刷新提交表单iframe仿ajax提交表单

本文摘要

代码

动图演示

在线演示

本文作者