js实现无刷新表单提交文件，将ajax请求转换为form请求方法

最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的问题. 一.无刷新实现form提交文件将form的target指向为一个iframe就可以实现无刷新提交文件了,但关键是还需要看到后台返回的数据,所以还需要为该iframe注册一个回调函数,因为iframe和该页面在同域内,所以可以在iframe里可以调用该回调函数,就可以看到后台返回的数据了.实…

DWZ框架Ajax无刷新表单提交处理流程

DWZ框架Ajax无刷新表单提交处理流程是: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数根据这个json数据做相应的处理注意: DWZ框架默认的ajax表单提交都是返回json数据,告诉客户端操作是否成功,成功或失败提示信息,以及成功后的处理方式(刷新某个navTab或关闭某个navTab或navTab页面跳转). 表单提交后服务器操作失败了,客户端接收statusCode和message后给出错误提示,表单…

话说Form标签的target属性-----无刷新表单提交

国庆前(2013)无聊,就在铁道部的12306上“逛”了下下. PS:原来之所以叫12306,是因为其客服号码是12306,好吧,我很无知…… 首先是被“逛”的页面:票价查询. 之所以去逛,是因为一直听闻该网站在节假日期间抢票慢.难,而国内浏览器厂商等开发抢票插件等等,这让我有些心动,于是便去瞧了瞧“传说”中的12306. 对于该页面的第一反应是,功能应该可以的,不然大家抢不到票了,不过美观的角度就不怎么样了. 本以为该页面会是用Ajax方式提及获取数据(因点查询后页面并无刷新迹象,且余票查询是…

ajax+FormData+javascript实现无刷新表单信息提交

ajax+FormData+javascript实现无刷新表单信息提交原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象同时收集fm的表单域信息. var fd = new FormData(fm); //实例化对象 alert(fd); fd对象内部有收集的form表单域信息 ajax传递表单信息 1.静态显示页面代码 <!DOCTYPE html > <html> <head> <meta http-equiv=&qu…

ajax+FormData+javascript 实现无刷新表单注册

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload=function() { var fm=document.getElementsByTagName("form")[0]; f…

传统表单提交文件上传，以及FormData异步ajax上传文件

传统的文件上传: 只用将form表单的entype修改成multipart/form-data,然后就可以进行文件上传,这种方式常用并且简单. 以下是另一种方式FormData,有时候我们需要ajax进行异步的文件提交,怎么办? 以下是引用别人的话: FormData的使用 FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用.如果表单enctype属性设为multipa…

MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求

假如有一个数据表格UserInfo: public class UserInfo { public int Id { get; set; } public string Name { get; set; } public string Pwd { get; set; } public int Sex { get; set; } } 控制器下Action方法:UserInfos 表单提交过来后UserInfo user对象可以获取到value值,只要html标签的name值与UserInfo下的属…

Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式

//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $("#basePath").val(); //上架操作 $("#upAll").click(function(){ var chk_value =""; $('input[name="ckID"]:checked').each(function…

输入值/表单提交参数过滤有效防止sql注入的方法

输入值/表单提交参数过滤,防止sql注入或非法攻击的方法: 代码如下: /** * 过滤sql与php文件操作的关键字 * @param string $string * @return string * @author zrp <zouruiping668@sina.com> */ private function filter_keyword( $string ) { $keyword = select|insert|update|delete|\|\/\*|\*|\.\.\/|\.\/…

php+mysql 除了设置主键防止表单提交内容重复外的另一种方法

感觉好久没有更新博客了,一直在做网站及后台,也没有遇到让我觉得可以整理的内容,之前做的一个系统,已经完成了,后来客户又要求加一个功能,大概就是表单提交的时候,约束有一项不能和以前的内容重复,如图比如说是这样的,在填写的时候身份证号不能和以前提交的内容重复,如果刚开始做的时候完全可以把身份证号设为主键,这样就防止重复提交了,但是一开始做的时候客户没有那么要求,所以用的是code主键自增长列,而且后面得很多信息都和这个有关联,所以说这个主键也不能动,有人说可以再设个主键,但是第一个主键可以控制重复…

在表单提交之前做校验-利用jQuery的submit方法

点击表单中的提交按钮,默认就会提交表单,如果要在表单提交之前做一些校验,那么就可以用jQuery的submit方法. 也就是jQuery的submit的方法执行顺序,在表单的提交之前.用法如下: $("form").submit(function(e){ alert("Submitted"); });…

Ajax 使用formdata 实现无刷新表单上传

FormData对象的作用就类似于这里的serialize()方法,不过FormData是浏览器原生的,且支持二进制文件 1.这里实现一个无刷新上传图片,成功后页面显示点击button 触发隐藏的 input上传 view层 <img id='headimage' src="images/default_tx.jpeg" width="80" height="80" style="border-radius: 5px;"…

【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比

一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFile" id="offenderExcelFile" /> …… 二. 表单form提交 function importFile(){ var excelPath = $("#offenderExcelFile").val(); if(excelPa…

php表单提交--文件

创建一个文件上传表单允许用户从表单上传文件是非常有用的. 请看下面这个供上传文件的 HTML 表单: <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>表单文件的上传(小于2MB)</h1> <form action="php…

使用JS和JQuery 阻止表单提交的两种方法

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>JavaScript禁止提交表单</title> <script type="text/javascript"> function getObj(id){ var Obj = document.getEl…

jfinal form表单提交文件

前台代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/commons/taglib.jsp" %> <%@ include file="/commons/common.jsp" %> <html> <head> <…

AJAX 表单提交文件上传

1. AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.提高用户体验度. 主要是使用XMLHttpRequest 对象 <script type="text/javascript" > var xmlhttp; if (window.XMLHttpRequest) {// code for…

js前端防止默认表单提交

代码如下: document.forms[0].onsubmit=function(){return false;};…

关于使用 AJax 生成Form表单，且表单提交需要验证，验证实效的解决方法

@Ajax.ActionLink("添加", "AddUser",new AjaxOptions() {InsertionMode = InsertionMode.Replace,UpdateTargetId = "pop-up", OnComplete = "ReValidate" }) Js: function ReValidate() { $.validator.unobtrusive.parse(document);…

在客户端先通过JS验证后再将表单提交到服务器

问题:想要在客户端先通过JS验证后再将表单提交到服务器参考资料: jQuery 事件 - submit() 方法试验过程: 服务器端使用PHP <html> <head> <script type="text/javascript" src="plugins/jquery-3.2.1.min.js"></script> <script type="text/javascript">…

Linux curl 模拟form表单提交信息和文件

Linux curl 模拟form表单提交信息和文件 curl是一个命令行方式下传输数据的开源传输工具,支持多种协议:FTP.HTTP.HTTPS.IMAP.POP3.TELNET等,功能超级强大. 我今天想说的是程序开发中常用的模拟Form提交 1.GET提交特别简单直接写url里面 2.POST提交通过 --data/-d 方式指定使用POST方式传递数据 3.模拟form表单提交文件 --form/-F 模拟form表单提交文件这个命令超级好用,再也不用为了写上传接口,而…

防止表单提交时刷新页面-阻止form表单的默认提交行为

最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用button 按钮提交表单的时候,要设置type="button" button在浏览器中默认的类型为submit: 2.使用input 代替button ,设置type="button" 3.event.preventDefault(); 在提交事件绑定的方法的最后…

jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址

一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm().clearFields(…

如何用elementui去实现图片上传和表单提交，用axios的post方法

下面是在vue搭建的脚手架项目中的组件component文件夹下面的upload.vue文件中的内容  <template> <el-row> <el-col :span="8" :offset="8"> <div id="upload"> <label class="el-form-ite…

HTML表单提交总结

概述:随着HTML5的兴起,前端越来越多样化,比如表单的提交,现在就有多种方式可以选择,下面总结一下常见的表单提交方式. 1.最基本的表单提交. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单提交示例 - 基本表单提交</title> </head> <body> <form action="/se…

form表单提交file

form表单提交文件,这毫无疑问不是个好办法.但是,存在既有意义.既然H5都还让着东西存在着,呢么必然有其意义. form表单中的input type=file这个空间,不得不说奇丑无比!问题是还不能修改它的样式,这就更让人蛋疼了. 好了,不闲扯,咱还是一条一条的列出来. 首先,就像开头说的,奇丑无比.那么自然是不可能就这么放页面里的,老板会打死你,美工会打死你,你自己都会打死你!那么怎么办呢? display:none!唉,好办法,我给它干掉,再搞个好看的button耦合到file控件上不就行…

基于Http原理实现Android的图片上传和表单提交

版权声明:本文由张坤原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/794875001483009140 来源:腾云阁 https://www.qcloud.com/community 现在服务器主要是Web居多,客户端一般通过http上传文件到web服务器,最开始的设想很简单,直接将图片转化为字节流,写入到http的outstream,随后发送出去即可. 但当这种方法出现问题,服务器根据文件名这个表单中的字段来判定…

Extjs 表单提交送给新手

Extjs的三种提交方式: 表单Ajax提交,普通提交,单独Ajax提交: 1.表单ajax提交(默认提交方式) 提交函数:当按下表单中的提交按钮时执行下面的btn函数,按照表单的name进行提交.提交数据后根据后台的返回值不同来回调success或者failure函数(和单独ajax的提交不同),后台返回值的形式:[如果返回outputResult(“{success:true}”),则调用success的函数.如果返回:outputResult(“{success:false,reason:…

Extjs之表单提交

Extjs的三种提交方式: 表单Ajax提交,普通提交,单独Ajax提交: 表单Ajax提交(默认提交方式) 提交函数:当按下表单中的提交按钮时执行下面的 btn函数,按照表单的 name进行提交. 根据后台返回值不同回调success或者failure函数(与单独ajax提交不同). 如果返回outputResult("{success:true}"),调用success函数, 如果返回outputResult("{success:false,reason:'"+…

Flask基础之返回值与form表单提交

目录 1.Python 现阶段三大主流Web框架 Django Tornado Flask 对比 2.Flask的安装 3.Flask的第一个简单应用 4.Flask中的render_template 5.Flask中的redirect重定向 6.Flask中的formdata表单提交 7.Flask中的formdata表单的文件传输 8.Flask的常见错误 8.1当你点击提交出现这样的错 8.2设置session的时候 1.Python 现阶段三大主流Web框架 Django Tornado…

【js实现无刷新表单提交文件，将ajax请求转换为form请求方法】的更多相关文章