本文摘要
应用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