龙空技术网

iframe无刷新提交表单,iframe仿ajax提交表单

高级前端开发进阶 241

前言:

现时各位老铁们对“ajax提交表单后跳转”大体比较重视,同学们都想要剖析一些“ajax提交表单后跳转”的相关文章。那么小编同时在网摘上收集了一些对于“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>";}?>

动图演示

标签: #ajax提交表单后跳转