【ajax 提交表单】多种方式的注意事项
在业务中,可能因为表单内容过于庞大,字段过于繁杂,如果人为去拼接的话 ,需要耗费大量的时间和精力,与此同时,代码看上去也是冗余不堪。
所以,提交表单的时候如果能整个表单数据整体提交,那是非常开心的事情。
同时,有时候会有需求在前台提交给后台数据之后,希望后台能在处理之后返回数据给前台,可能是标识也好,可能是具体的数据也罢。
这时候又需要使用ajax去提交数据。【因为使用jQuery的submit()方法是没有回调函数的,那个函数只是当表单发生提交时,要同时执行的函数而已,例如:$("#poFromId").submit()】
那能不能使用ajax进行局部页面刷新的同时将整个表单的数据提交呢?
答案肯定是可以的,
首先,咱们把整个的一圈代码给出来:
1.jsp页面
<form action="../department/addPosition.htmls" method="post" role="form" id="poFromId" >
<div class="form-group">
<label class="col-md-3 control-label">职位名称</label>
<div class="col-md-9" style="width: 77%">
<input type="hidden" name="positionId" />
<input type="hidden" name="positionCre" />
<input type="text" class="form-control" name="positionName" placeholder="eq:软件开发工程师" data-bv-trigger="keyup" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">职位所属等级</label>
<select class="selectpicker input input-big" name="positionGrade">
<option value="专员">专员</option>
<option value="经理">经理</option>
<option value="总监">总监</option>
</select>
</div>
<hr/>
<div class="form-group center">
<button type="button" class="btn btn-success positionUp">提交职务</button>
<button type="reset" class="btn btn-warning">重置页面</button>
</div>
</form>
2.js 表单整体使用ajax提交部分
/**
* 提交职位
*/
$(".positionUp").click(function(){
$("input[name='positionId']").val(UUID());
$("input[name='positionCre']").val(parent.departmentId);
var position = $("#poFromId").serialize(); $.getJSON("../department/addPosition.htmls?"+position,function(data){
if(data){
layer.msg('添加成功', {
icon: 1,
time: 2000
}, function(){
});
parent.layer.close(parent.positionAdd);
}
}); });
3.controller后台接收部分
@RequestMapping("addPosition")
@ResponseBody
public boolean addPosition(Position position){
position.setCreateDate(new Timestamp(System.currentTimeMillis()));
position.setUpdateDate(new Timestamp(System.currentTimeMillis()));
//操作人 未插入
positionService.save(position); return true;
}
4.上面表单中name对应的实体Position
package com.agen.entity; import java.sql.Timestamp;
import java.util.HashSet;
import java.util.Set; import javax.persistence.CascadeType;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.OneToMany;
import javax.persistence.Table; import org.hibernate.annotations.GenericGenerator; import com.fasterxml.jackson.annotation.JsonIgnoreProperties; /**
* Position 岗位表
*/
@Entity
@Table(name = "position", catalog = "performance")
@JsonIgnoreProperties(value = {"positionchanges"})
public class Position implements java.io.Serializable { // Fields private String positionId;
private String positionName; //岗位名称
private String positionGrade; //岗位对应等级
private Timestamp createDate;
private Timestamp updateDate;
private String operation;
private String positionCre; //岗位所属部门
private Set<Positionchange> positionchanges = new HashSet<Positionchange>(0); // Constructors /** default constructor */
public Position() {
} /** full constructor */
public Position(String positionName, String positionGrade,
Timestamp createDate, Timestamp updateDate, String operation,
String positionCre, Set<Positionchange> positionchanges) {
this.positionName = positionName;
this.positionGrade = positionGrade;
this.createDate = createDate;
this.updateDate = updateDate;
this.operation = operation;
this.positionCre = positionCre;
this.positionchanges = positionchanges;
} // Property accessors
//@GenericGenerator(name = "generator", strategy = "uuid.hex")
@Id
//@GeneratedValue(generator = "generator")
@Column(name = "positionID", unique = true, nullable = false, length = 36)
public String getPositionId() {
return this.positionId;
} public void setPositionId(String positionId) {
this.positionId = positionId;
} @Column(name = "positionName", length = 30)
public String getPositionName() {
return this.positionName;
} public void setPositionName(String positionName) {
this.positionName = positionName;
} @Column(name = "positionGrade", length = 20)
public String getPositionGrade() {
return this.positionGrade;
} public void setPositionGrade(String positionGrade) {
this.positionGrade = positionGrade;
} @Column(name = "createDate", length = 0)
public Timestamp getCreateDate() {
return this.createDate;
} public void setCreateDate(Timestamp createDate) {
this.createDate = createDate;
} @Column(name = "updateDate", length = 0)
public Timestamp getUpdateDate() {
return this.updateDate;
} public void setUpdateDate(Timestamp updateDate) {
this.updateDate = updateDate;
} @Column(name = "operation", length = 36)
public String getOperation() {
return this.operation;
} public void setOperation(String operation) {
this.operation = operation;
} @Column(name = "positionCre", length = 500)
public String getPositionCre() {
return this.positionCre;
} public void setPositionCre(String positionCre) {
this.positionCre = positionCre;
} @OneToMany(cascade = CascadeType.ALL, fetch = FetchType.LAZY, mappedBy = "position")
public Set<Positionchange> getPositionchanges() {
return this.positionchanges;
} public void setPositionchanges(Set<Positionchange> positionchanges) {
this.positionchanges = positionchanges;
} }
接下来,咱们要细细谈一谈这上面需要注意的小细节:
1.首先,如果你想使用js控制提交整个表单,那最起码的,页面中不能存在元素的name=submit的,当然最下面的提交按钮也不能使用type=submit了,因为你想在js中处理之后再去使用js提交表单数据嘛!!
2.其次,js中,获取整体的表单数据,使用了var position = $("#poFromId").serialize();序列化的方法去获取整个表单的数据!!
3.再者说,既然你讲前后台表单数据传输交给spring去管理了,那最起码的要求,你得在form表单中将实体中规定不能为null的字段值都给上,同样的,如果你想前台传递给后台,后台直接拿到的就是一个字段都比较完整的实体对象,那表单中的name就要尽量多的和实体中的字段值保持一致;
4.对于第3点中,可能会出现,实体中的某个属性也是个实体,例如:【注册的时候,User实体需要选择是哪个部门的,而Department实体在注册页面上,也就是个下拉框,也就是个departmentId而已,对于这种情况,我们可以将name设置为其他的,在后台单独接收这个name对应的值,然后将departmentId实例化成Department对象,再赋值给User实体】
5.注意ajax中,data部分是:$.getJSON("../department/addPosition.htmls?"+position,拼接的,而不是$.getJSON("../department/addPosition.htmls",{position:position},给出的。这就需要试验一下,两种方式最后请求的地址是什么样子的;
6.Controller中,这里需要返回数据给前台,才使用了@ResponseBody这个注解;而就算你返回是void的,不希望给前台返回值,也需要@ResponseBody。不然,spring会认为你要去找那一串地址,会无休止的找下去,就会报错。
这里接着说:
上面那个表单,数据量很小,如果提交的是个大表单,那么就不能采用上面这种ajax的写法了,而是:
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});
使用jQuery中最原始的ajax的写法,这样就可以保证大量的数据传递给后台了。
【ajax 提交表单】多种方式的注意事项的更多相关文章
- Jquery ajax提交表单几种方法
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...
- lavarel框架中如何使用ajax提交表单
开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加 在网上看了很多的解决方式,我是用下面这种方法解决的: ...
- Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...
- ajax提交表单序列化(serialize())数据
知识点: $("#form").serialize();将表单数据序列化为标准URL编码文本字符串(key1=value1&key2=value2…). 以下用一个例子来演 ...
- ajax提交表单、ajax实现文件上传
ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...
- 关于ajax提交表单的一些实例及遇到的问题和解决办法
ajax提交的表单有两种情况: 第一种:input type类型没有file上传文件类型的表单 第二种:input type类型有file上传文件类型的表单 之所以分为两种:是因为原生ajax是不能提 ...
- JQuery ajax提交表单及表单验证
JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目 注:经过验证,formValidator只适合一个 ...
- ajax提交表单,包括跳入的坑!
本来今天上午写了一个js执行上下文的一个了解.但是写一大半的时候出去有事,电脑关了啥都没了. 还是让我们进入正题 ajax提交表单,很简单,原生js的代码太复杂,我们就jq的去写. 创建html文件, ...
- Validator验证Ajax提交表单的方法
Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...
- jquery实现ajax提交表单
一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...
随机推荐
- Fedora20-32bit cross-compiling arm-linux-gcc4.3.2
目录 0 前言 1 安装arm-linux-gcc-4.3.2 2 配置 nfs 服务器 0 前言 之前在 fedora 64bit 上建立交叉编译,但由于4.4.3版本需要另装用于gdb-serve ...
- 海拔高度图*.dem文件的读取—vtkDEMReader
vtkDEMReader reads digital elevation files and creates image data. Digital elevation files are produ ...
- 关于tkCommand的各种事件的解释
superclass for callback/observer methods vtkCommand is an implementation of the observer/command des ...
- Django 1.7 Tutorial 学习笔记
官方教程在这里 : Here 写在前面的废话:)) 以前学习新东西,第一想到的是找本入门教程,按照书上做一遍.现在看了各种网上的入门教程后,我觉得还是看官方Tutorial靠谱.书的弊端一说一大推 本 ...
- SQL语句生成指定范围内随机数
1.生成随机实型数据 create procedure awf_RandDouble @min dec(14,2), @max dec(14,2), @result dec(14,2) output ...
- Tomcat下conf下server.xml的文件配置信息
Tomcat下conf下server.xml的文件配置信息,基本上不用做任何修改就可以使用,修改的地方就是host区域的一些配置,此文件设置端口为80. 注意:Tomcat配置文件中(即server. ...
- C# XMLDocument
今天开发一个WPF模块需要本地化保存一些用户设置,鉴于数据量不大,用XML. (要是再小的话可以用Resources 和 Settings). 清晰简短教程移步:http://bdk82924.ite ...
- ubuntu14.04下搭建python+mysql环境
简略记录ubuntu14.04下搭建python操作的mysql服务器的过程和其中遇到的问题及解决方法. 第一部分: 安装mysql 安装步骤:1. sudo apt-get install mysq ...
- 如何在centos下部署Node环境
从今年开始,养车之家的PC 和 M端 的站点 ,服务器从tomcat全部改成了Node,无论在测试环境.准生产.正式环境,我们都需要在服务器进行Node的部署,在这里我给大家详细说明下Node在lin ...
- win7下IIS的安装和配置 图文教程
转自 http://www.jb51.net/article/29787.htm 最近工作需要IIS,自己的电脑又是Windows7系统,找了下安装的方法,已经安装成功.在博客里记录一下,给需要的 ...