js实现无刷新表单提交文件，将ajax请求转换为form请求方法
最近在做项目的时候遇到一个需要上传文件的需求，因为ajax请求是无法上传二进制文件流的，所以只能用form表单提交，而form提交有一个问题就是会使页面刷新，本文解决了form表单提交文件时页面刷新的问题。
一、无刷新实现form提交文件
将form的target指向为一个iframe就可以实现无刷新提交文件了，但关键是还需要看到后台返回的数据，所以还需要为该iframe注册一个回调函数，因为iframe和该页面在同域内，所以可以在iframe里可以调用该回调函数，就可以看到后台返回的数据了。实例如下：
<body><formmethod="post"target="targetFrame"action="#"enctype="multipart/form-data"id="fileupId"><inputtype="file"name=""id=""></form><script>varifmId= 'targetFrame';variframe=document.createElement("iframe");document.body.appendChild(iframe);iframe.style.display= "none";iframe.contentWindow.name=ifmId;iframe.id=ifmId;iframe.callback= function(json) {success&&success(json)}</script> </body>
里面的js的作用主要是创建了一个iframe，并为iframe设置id和name，并为其注册回调函数。另外后台需要注意的有两点：
1.后台返回的数据类型应为html，否则无法在iframe里面显示，举个栗子：<html><script>frameElement.callback({test:'test'})</script></html>
，其中{test:test}应该是后台返回的数据；
2.ngix的http头应将x-Frame-Option设置为SAMEORIGIN，这样使页面可以在同域下能够被iframe调用；
这样一来，一个可以不刷新页面上传文件的功能就做好了，但是我们整个的系统都是ajax完成的，如果临时改成form可能改变很大，那么有没有有个方法可以不用一个个的去改，直接用一个方法就可以将所有的ajax上传的内容都改成form呢
二、动态转换所有数据到form表单内，并实现提交；
这个方法总的来说分为三步：1.在打开页面的时候遍历所有需要提交的输入框或者文件上传等内容，并将其每一个添加到动态创建的form表单之中；2.将其中的上传文件按钮绑定表单中的文件上传input；3.当用户点击提交的时候自动填充除了文件外其他的form表单，并提交表单，获取返回数据。
直接看代码：
var newForm = function(){var conds = $('[data-cond]');var formDom = $('<form method="post" style="display:none;" enctype="multipart/form-data" id="fileupId"></form>')var textDom = $('<input type="text">');var fileDom = $('<input type="file">');conds.each(function(i, ele) {var _ele =$(ele);var key = _ele.data('cond').toString().trim();if (_ele.hasClass('select')) {//下拉框formDom.append($('<input type="text">').attr('name',key));}else if (_ele.hasClass('fileUp')) {//文件formDom.append($('<input type="file">').attr('name',key));_ele.on('click',function(){$("input[name="+ key +"]").click();})}else{formDom.append($('<input type="text">').attr('name',key));}});$('body').append(formDom);formDom.delegate('input','change',function(){var id = $(this).attr('name');var files = $(this).get(0).files[0];//判断文件类型if(!/\.jpg$|\.jpeg$|\.gif|\.png$/ig.test(files.name)){alert('请选择图片文件~')return false;}//判断文件大小if(files.size > 20480000){alert('请上传20M内的文件~')return false;}var name = files.name.replace(/(\w{10})(\w+)/,'$1..')//文件名筛选只显示前10个字符$('#'+id+'').text(name);})//formDom.hide();}
这个方法的目的主要是为了动态创建一个表单，并为html文件中的上传文件按钮与form内的上传文件输入框绑定，实现选择文件的功能，另外还用正则实现了文件类型、大小的筛选并选择性显示文件名的前十个字符，其中$('#'+id+'')就是相应的上传文件按钮，另外为想转换为form表单内的内容的dom添加标签[data-cond="xxx"]，通过判断它的类来添加不同的Input。
var form = function(opt){console.log()var dom =opt.dom;var success = opt.success || function() {};var preUrl =eking.global.preUrl;var postUrl = opt.postUrl || "";var iframeName =opt.iframeName;var conds = $('[data-cond]');var consObj ={};conds.each(function(i, ele) {var _ele =$(ele);var key = _ele.data('cond').toString().trim();if (_ele.hasClass('select')) {//下拉框$("input[name="+ key +"]").val(_ele.data('select').getValue());}else if (_ele.attr('type') == "text") {//文本框$("input[name="+ key +"]").val(_ele.val());}else if (_ele.attr('type') == "password") {//密码框$("input[name="+ key +"]").val(_ele.val());}else if (_ele.hasClass('span')){$("input[name="+ key +"]").val(_ele.text());}});dom.attr({target: iframeName,action: preUrl+postUrl});var ifmId = 'targetFrame';var iframe = document.createElement("iframe");document.body.appendChild(iframe);iframe.style.display= "none";iframe.contentWindow.name=ifmId;iframe.id=ifmId;iframe.callback= function(json) {success&&success(json)$("#targetFrame").remove();}}
第二个函数就和我们一开始介绍的方法类似，不过将其进行了封装，添加了几个参数dom、success、preUrl、postUrl、iframeName，其中两个url是为了设置form表单提交的地址，dom则是在第一个函数中创建form表单，success则是数据传输后的回调函数。
在目标页面刚打开时调用第一个函数，当用户点击提交时，调用第二个函数就可以实现转换输入内容到form表单中并进行提交 :)
转载于:https://www.cnblogs.com/cheerup/p/6260764.html
js实现无刷新表单提交文件，将ajax请求转换为form请求方法相关推荐
- PHP jQuery Ajax 无刷新表单提交实例
采用 PHP 为后台,前端使用强大的 jQuery 库,可以很快写一个无刷新的表单实例. 整个过程分为两部分,一部分是 HTML 和 JS 文件,另一部分是 PHP 代码,返回服务器的响应. HTML ...
- 将form表单提交文件修改为ajax提交
好久没有记录工作中的出现的问题了,不过最近客户提出了新的需求,正好弥补了一下我的短板,学到了新的知识. 周一接到客户电话,要求完善上周写的某个功能--就是同时上传多个图片,并通过接口程序传到第三方系统 ...
- form表单用butten提交后无反应表单提交三种方式
form表单用butten提交后无反应&表单提交三种方式 一,表单提交无反应 有时候,我们发现表单提交的butten按钮,根本就没niao用.鼠标都点烂了,也提交不上去.找了半天什么错误也没找 ...
- layui删除后刷新表格_layui form表单提交之后重新加载数据表格的方法
如下图,在我们做高级查询的时候需要重新加载数据表格table.reload(); HTML form表单 菜单: JS $(function () { //注意:这里是数据表格的加载数据,必须写 ...
- 解决Form表单提交文件后台获取为null的情况
项目想做一个上传文件的功能模块,但是发现后台获取文件始终为null,而且在form表单上也配置好了需要的action属性.method属性和enctype="multipart/form-d ...
- vue表单提交数组_ajax传递数组、form表单提交对象数组
在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...
- js将form表单提交数据封装为ajax提交
对于数据提交,html自带了form表单,以form表单里的input框的name为key值,以其所对应的value为value值,传给后台供其使用.但是这样的方法与ajax传输数据还是有许多差距: ...
- 表单提交_django 的ajax提交与表单提交记录
好记性不如烂笔头: 据说的ajax提交比表单提交要好,可以不用重新刷新页面: 表单提交:MTV模式 # 局部禁用csrf保护 @csrf_exempt def login(request):if re ...
- form 表单提交时用ajax异步请求导致ajax请求结果无法接收问题
1.背景描述,有个公司内部用的小系统,不想大动干戈用太多前端框架,就用HTML5写了个登陆页面,刚开始想着用form表单提交登陆账户信息.后来因为前后端分离,并且统一用ajax调用后台服务交互数据,因 ...
- MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求
假如有一个数据表格UserInfo: public class UserInfo {public int Id { get; set; }public string Name { get; set; ...
最新文章
- cocos2d-x在win7下的android交叉编译环境
- Android Gradle 配置Java src目录、Res 目录
- mysql 5.7 修改密码_又忘记密码啦？教你几种更改密码的方式
- Zabbix基础概念
- 37镇魔曲网页版服务器状态,37镇魔曲网页版各职业攻略分析
- Java里面的几种路径的区别
- 容器编排技术 -- Kubernetes Volume
- 从MAC缓存表中我们看到的问题
- 大数据之-Hadoop伪分布式_配置启动HDFS_并运行MR程序---大数据之hadoop工作笔记0023
- LED显示驱动（七）：图层基本测试总结
- Hello Qt（十四）——QT绘图系统
- 网页设计之 HTML代码的理解.
- tp5设置session过期时间
- 黑马程序员Python教程——Python从入门到精通教程
- OpenWrt搭建KMS服务（Vlmcsd）
- 二、vue组件化开发（轻松入门vue）
- android 实现进度条的画面加载
- 敬你一杯酒，从此莫回头。往事归零，爱恨随意。我干杯，你随意
- Android攻城狮OptionsMenu
- 百度,谷歌,360,神马,必应,搜狗搜索引擎网站链接提交入口