之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给你们, 现在看到感觉还挺有意思 。
好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。
1.功能实现解释说明
1. form 使用 target 属性, 且 target 取值为 iframe 元素的 name 属性值; 具体如下:
2. 在当前页面建一个 iframe 并隐藏 (display:none)
3. 给这个 iframe 取名 (name="id_iframe")
4. 设置 form 表单的 target 属性 (target="id_iframe")
5. 提交表单，就是无刷新
2.代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS 实现 form 表单当前页面无刷新提交(琐碎知识点整理) </title>
</head>
<style>
.w_form-refresh {
background-color: cornflowerblue;
padding: 32px;
}
.w_form-input {
padding: 8px 20px;
cursor: pointer;
border: 1px solid #ccc;
}
.w_form-input:hover {
background-color: skyblue;
color: brown;
font-size: 500;
border: 1px solid red;
}
</style>
<body>
<div class="w_form-refresh">
<form name="AjaxUpload" method="post" action="http:198.102.6.104/xx/yy/zz.cn" target="id_iframe">
<input type="submit" name="Submit" class="w_form-input" value="无刷新 form 表单提交 (action : 绑定的接口无效, 有兴趣的同学可以自己搭建一个接口调时一下)">
</form>
<iframe name='id_iframe' id="id_iframe" style="display:none"></iframe>
</div>
</body>
</html>
3.图片示例
i-1-show.png
