前端表单提交数据



表单上传附件

1.使用form表单进行提交

1
2
3
4
5
<form name="form名称" action="请求地址"  method="请求类型" enctype ="multipart/form-data">
<input type="file" name="">
<input type="text" name="">
<input type="submit" value="提交">
</form>

2.使用FormData对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let formData = new FormData(document.getElementById('editUserInfo'));
$.ajax({
url: url,
type: method,
data: formData,
processData: false,
contentType: false,
xhrFields: {
withCredentials: true
},
crossDomain: true,
success: function (res) {
// ...
}
})

其中:XMLHttpRequest.withCredentials, 不同域下的XmlHttpRequest 响应,不论其Access-Control- header 设置什么值,都无法为它自身站点设置cookie值,除非它在请求之前将withCredentials 设为true。

也可以这么来获取formData
创建一个空的FormData对象,然后再用append方法逐个添加键值对

1
2
3
4
let formData = new FormData($( "#uploadForm" )[0]);
// 或
let formData = document.getElementById("form");
formData.append("CODE","123456"); //自定义参数传递

利用form元素对象的getFormData方法生成它 (测试没成功)

1
2
let formobj =  document.getElementById("form");
let formdata = formobj.getFormData()
1
2
3
4
5
6
7
8
9
10
11
12
// 返回给定键的第一个值
formData.get(username)

// 返回给定键的所有值
formData.getAll(username); // ["Justin", "Chris"]

// 检查是否包含给定键,返回 true 或 false
formData.has(username);

// 设置给定键的值

formData.set(name, value)

后端记得添加:MultipartFile file参数获取

数据json串处理

前端页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>新增指标</title>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"
></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: auto;
overflow: hidden;
}
form {
text-align: center;
}
</style>
</head>
<body>
<div>
<form class="form-horizontal formData">
<div class="form-group">
<label for="nameOfIndex" class="col-sm-2 control-label"
>指标名称:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control nameOfIndex"
name="nameOfIndex"
placeholder=""
/>
</div>
</div>
<div class="form-group">
<label for="indexCoding" class="col-sm-2 control-label"
>编码:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control indexCoding"
name="indexCoding"
placeholder=""
/>
</div>
</div>
<div class="form-group">
<label for="indexHierarchy" class="col-sm-2 control-label"
>层级:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control indexHierarchy"
placeholder=""
name="indexHierarchy"
/>
</div>
</div>
<div class="form-group">
<label for="dataSources" class="col-sm-2 control-label"
>来源:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control dataSources"
placeholder=""
name="dataSources"
/>
</div>
</div>
<div class="form-group">
<label for="theIndexAlgorithm" class="col-sm-2 control-label"
>算法:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control theIndexAlgorithm"
placeholder=""
name="theIndexAlgorithm"
/>
</div>
</div>
<div class="form-group">
<label for="targetClassification" class="col-sm-2 control-label"
>分类:</label
>
<div class="col-sm-10">
<select
id="checkedLevel"
name="targetClassification"
class="quantitativeDescription"
style="
width: 100%;
height: 35px;
border-radius: 4px;
border-color: #ccc;
color: rgb(66, 65, 65);
"
>
<option value="0">标签</option>
<option value="1">目录</option>
</select>
</div>
</div>
<div class="form-group">
<label for="quantitativeDescription" class="col-sm-2 control-label"
>说明:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control quantitativeDescription"
placeholder=""
name="quantitativeDescription"
/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input
type="submit"
class="btn btn-default submitData"
value="提交"
/>
</div>
</div>
</form>
</div>
</body>
</html>
  1. serialize()把表单信息序列化成一个字符串
1
$(".formData").serialize() // 结果是一串字符串
1
nameOfIndex=132&indexCoding=&indexHierarchy=313&dataSources=&theIndexAlgorithm=213&targetClassification=0&quantitativeDescription=
  1. serializeArray()把表单信息序列化成一个JSON对象
1
console.log($(".formData").serializeArray()); // 结果是一个json对象,

比如我需要取第一个的name值,就可以这样:$(“.formData”).serializeArray()[0].name

然后使用JSON.stringify( ($(‘.formData’).serializeObject())),可以将此又格式化为一串字符串。

1
{"nameOfIndex":"12","indexCoding":"","indexHierarchy":"313","dataSources":"","theIndexAlgorithm":"213","targetClassification":"0","quantitativeDescription":""}
  1. 自定义json串处理格式
1
2
3
4
5
6
7
8
9
10
11
12
13
function formToJson(data) {
data = data.replace(/&/g, '","');
data = data.replace(/=/g, '":"');
data = '{"' + data + '"}';
return data;
}

$(".submitData").click(function () {
let data = $(".formData").serialize(); // 结果是一串字符串
data = decodeURIComponent(data, true); // 防止中文乱码
let json = formToJson(data); // 转化为json
console.log("json=" + json);
});
1
json={"nameOfIndex":"12","indexCoding":"","indexHierarchy":"313","dataSources":"","theIndexAlgorithm":"213","targetClassification":"0","quantitativeDescription":""}
1
2
3
4
5
6
7
8
9
10
jQuery.prototype.serializeObject = function () {
let obj = new Object();
$.each(this.serializeArray(), function (index, param) {
if (!(param.name in obj)) {
obj[param.name] = param.value;
}
});
return obj;
};
console.log(($('.formData').serializeObject()));

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信