form表单提交方式

1.无刷新页面提交表单

表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,
form提交目标位当前页面iframe则不会刷新页面

<form action="/url.do" method="post" target="targetIfr">
<input type="text" name="name"/>
</form>
<iframe name="targetIfr" style="display:none"></iframe>

2.通过type=submit提交

一般表单提交通过type=submit实现,input type="submit",浏览器显示为button按钮,通过点击这个按钮提交表单数据跳转到/url.do

<form action="/url.do" method="post">
<input type="text" name="name"/>
<input type="submit" value="提交">
</form>

3.js提交form表单

js事件触发表单提交,通过button、链接等触发事件,js调用submit()方法提交表单数据,jquery通过submit()方法

<form id="form" action="/url.do" method="post">
<input type="text" name="name"/>
</form>

js: document.getElementById("form").submit();
jquery: $("#form").submit();

4.ajax异步提交表单数据

采用ajax异步方式,通过js获取form中所有input、select等组件的值,将这些值组成Json格式,通过异步的方式与服务器端进行交互,
一般将表单数据传送给服务器端,服务器端处理数据并返回结果信息等

<form id="form"  method="post">
<input type="text" name="name" id="name"/>
</form>
var params = {"name", $("#name").val()}
$.ajax({
type: "POST",
url: "/url.do",
data: params,
dataType : "json",
success: function(respMsg){
}
});

5.页面无跳转

如果通过form表单提交请求服务端去下载文件,这时当前页面不会发生跳转,服务端返回void,通过response 去写文件数据,
页面会显示下载文件。

<form action="/url.do" method="post">
<input type="text" name="name"/>
<input type="submit" value="提交">
</form> @RequestMapping(value = "/url")
public void exportFile(HttpServletRequest req, HttpServletResponse response, String rptId)
throws Exception {
OutputStream out = null;
try {
String rptName = "file";
String fileName = new String((rptName + excelAble.getFileSuffix()).getBytes("GBK"),
"8859_1");
response.reset();
response.setContentType("application/octec-stream");
response.setHeader("Content-disposition", "attachment; filename=" + fileName);
out = response.getOutputStream();
excelAble.exportFile(out);
} catch (Exception e) {
logger.error(e);
} finally {
if (out != null) {
out.close();
}
}
}

6.form表单上传文件

使用form表单进行上传文件需要为form添加enctype="multipart/form-data" 属性,除此之外还需要将表单的提交方法改成post,
如下 method="post", input type的类型需要设置为file

 <form action="/url.do" enctype="multipart/form-data" method="post">
<input type="file" name="name"/>
<input type="submit" value="提交">
</form>

24.form表单提交的六种方式的更多相关文章

  1. form表单提交信息的方式

    form表单提交信息的方法有两种,一种是get,一种是post.get提交的数据是在地址栏上提交,一般隐私数据不会选择这样方式.地址栏上只能提交字符. 如果使用的是post提交,那么信息都在消息正文中 ...

  2. form表单提交转为ajax方式提交

    <form action="xxx" method="get"> //action的值是请求的url地址 <div class="f ...

  3. form表单提交三种方式,demo实例详解

    第一种:使用type=submit  可以直接提交 <html> <head> <title>submit直接提交</title> </head& ...

  4. Form表单提交的简要方式

    <html> <head> <meta name="viewport" content="width=device-width" ...

  5. Form表单提交数据的几种方式

    一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...

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

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  7. Form 表单提交的几种方式

    简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的   这种方式最近到一个form提供action路径后台接受就可以< ...

  8. form表单提交方式

    form表单提交方式总结一下: 一.利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交 ...

  9. form表单提交,后台怎么获取select的值?后台直接获取即可,和input方式一样。

    form表单提交,后台怎么获取select的值? 后台直接获取即可,和后台获取input的值方式一样. form提交后,后台直接根据select的name获取即可,即getPara("XXX ...

随机推荐

  1. windows查看注册表

    首先win+r打开程序搜索框 输入regedit 然后编辑==>查找

  2. [No0000109]Git2/9-安装Git

    最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Unix系统上跑.不过,慢慢地有人把它移植到了Windows上.现在,Git可以在Linux.Unix.Mac和Window ...

  3. 一些shell默认的变量

    测试脚本如下,我这里主要想测试$0,$1,$2,$n,$@,$*默认都代表了什么? #!/bin/sh echo '$1='$1 echo '$2='$2 echo '$@='$@ echo '$*= ...

  4. flannel

    Docker跨主机容器间网络通信实现的工具有Pipework.Flannel.Weave.Open vSwitch(虚拟交换机).Calico实现跨主机容器间的通信.其中Pipework.Weave. ...

  5. A pointer is a variable whose value is the address of another variable 指针 null pointer 空指针 内存地址0 空指针检验

    小结: 1.指针的实际值为代表内存地址的16进制数: 2.不同指针的区别是他们指向的变量.常量的类型: https://www.tutorialspoint.com/cprogramming/c_po ...

  6. MySQ数据表设计

    数据表概念 数据表是数据库中的基本对象元素,以记录(行)和字段(列)组成的二维结构用于存储数据.数据表由表结构和表内容两部分组成,先建立表结构,然后才能输入数据.数据表结构设计主要包括字段名称.字段类 ...

  7. dp 单调性优化总结

    对于单调性优化其实更多的是观察dp的状态转移式子的单调性 进而用优先队列 单调队列 二分查找什么的找到最优决策 使时间更优. 对于这道题就是单调性优化的很好的例子 首先打一个暴力再说. f[i][j] ...

  8. 转:eclipse maven build、maven install 等区别

    原文地址:eclipse maven build.maven install 等区别

  9. day1_jmeter接口测试

    一.Jmeter-http接口脚本: 步骤: 1.添加线程组 2.添加http请求 3.在http请求中写入接口url.路径.请求方式.参数 4.添加查看结果树 5.调用接口.查看返回值 二.Jmet ...

  10. DER、CRT、CER、PEM格式的证书及转换

    一.证书和编码 X.509证书,其核心是根据RFC 5280编码或数字签名的数字文档. 实际上,术语X.509证书通常指的是IETF的PKIX证书和X.509 v3证书标准的CRL 文件,即如RFC ...