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

更新日期: 2020-11-16阅读量: 492标签: 表单作者: TANKING

本文摘要

使用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>";
}
?>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/10086

react表单_受控组件与非受控组件

在 React 中,表单元素通过组件的 state 属性来自己维护 state,并根据用户输入调用setState()来进行数据更新,使 React 的 state 成为“唯一数据源”,被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

layui在form表单不回调的问题

在使用layui进行ajax表单提交时,不回调,并且刷新了当前页面。在表单提交后添加 代码 return false;form.on()表单监控事件中一定要加 return false;

form表单input回车提交问题

文本框输入完成后点击回车页面刷新,问题出在form上,当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容,就会发生刷新事件。

JS使用textarea模拟post提交表单

textarea代表HTML表单多行输入域,textarea标签是成对出现的,以<textarea>开始,以</textarea>结束。cols -- 多行输入域的列数,rows -- 多行输入域的行数

AntDesign表单的理解与使用

虽然 react 没有内置的表单验证逻辑,但是我们可以使用 react 组件库 AntDesign 中的表单组件 Form 来实现这一需求。具体地, AntDesign 中的表单组件 Form 与表单域 Form.Item(用于包裹任意输入控制的容器)配合使用:

input,textarea限制字数,实时绑定

input,textarea限制字数,实时绑定的方式:1.在input 或 textarea中加属性 、 2.js判断,拓展: 实时绑定功能:二种输入标签的实时绑定方式 。 需求:框后面有显示字数

小程序/网页实现textarea高度随内容自动改变

textarea默认的高度不是对着内容变化,而是随着内容增多,出现了滚动条。目前的需求是实现一个能够输入的textarea,并且高度跟着内容变化。以及小程序的textarea高度随内容自动改变的实现

使用Vue Composition API写出清晰、可扩展的表单

表单是前端开发中最棘手的部分之一,您可能会在其中发现很多混乱的代码。基于组件的框架,如 Vue.js,在提高前端代码的可扩展性方面做了很多工作,但是表单的问题仍然存在。

谷歌浏览器禁止表单自动填充

在项目开发期间发现谷歌浏览器有记住密码的功能,该功能有个问题就是一遇到input type=password就开始自动填充,同一个账户还好,就是bug了。找了一堆解决方案终于找到了办法,下面分享一下解决方案。

HTML常用标签之<form>标签

在HTML中,<form></form>标记对用来创建一个表单,即定义表单的开始和结束位置,在标记对之间的一切都属于表单的内容。每个表单元素开始于form元素,可以包含所有的表单控件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!