前端踩坑记录

学习的道路就是不停的踩坑…

Long类型转json精度丢失

今天在开发的时候,用swagger做测试,莫名的发现返回的Long类型的id跟数据库的对应不上。去搜了一下才发现,js内置有32位整数,而number类型的安全整数是53位。如果超过53位的,就会丢失精度,而Long类型恰恰是64位。

解决方式可以添加2个类,

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
/**
* Long 类型字段序列化时转为字符串,避免js丢失精度
*/
public class LongJsonSerializer extends JsonSerializer<Long> {
@Override
public void serialize(Long value, JsonGenerator jsonGenerator, SerializerProvider serializerProvider) throws IOException, JsonProcessingException {
String text = (value == null ? null : String.valueOf(value));
if (text != null) {
jsonGenerator.writeString(text);
}
}
}

/**
* 将字符串转为Long
*
*/
public class LongJsonDeserializer extends JsonDeserializer<Long> {
private static final Logger logger = LoggerFactory.getLogger(LongJsonDeserializer.class);

@Override
public Long deserialize(JsonParser jsonParser, DeserializationContext deserializationContext) throws IOException, JsonProcessingException {
String value = jsonParser.getText();
try {
return value == null ? null : Long.parseLong(value);
} catch (NumberFormatException e) {
logger.error("解析长整形错误", e);
return null;
}
}
}

然后在需要处理的Long类型的id字段上,加上注解

1
2
3
@JsonSerialize(using = LongJsonSerializer.class)
@JsonDeserialize(using = LongJsonDeserializer.class)
private Long id;

form表单点击button,ajax提交自动刷新

话不多说,直接上代码

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
<form>
//省略一堆代码
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-primary" onclick="submitAcc()">保存内容</button>
<button class="btn btn-white">取消</button>
</div>
</div>
</form>

<script>
function submitAcc() {
$.ajax({
type: "POST",
url: "/backend/account",
data: $('#accAdd').serialize(),
success: function (result) {
if(result.success==true){
swal({title: "你的小账本~", text: result.msg, type: "success"}, function(){
//跳转至列表界面
location.href = "/backend/account/list";
});
}else {
swal({title: "你的小账本~", text: result.msg, type: "error"}, function(){
//刷新
location.reload();
});
}
},
error: function (result) {
swal({title: "你的小账本~", text: result.msg, type: "error"}, function(){
//刷新
location.reload();
});
}
});
}
</script>

本来就是想一个添加数据的功能,每次点击提交后硬是给我刷新页面,搞的头晕脑胀。后来各种尝试,
发现form中存在button标签时,用ajax异步提交表单就会刷新。

原因:button 存在时会再次提交一下表单,所以页面被刷新了。(之前认为button type=’submit’ 时)button才有提交表单的功能。

解决:button标签换成a标签就可以了,或者不使用form。

当时犯傻的地方 已修正后的页面 ^.^

ajax使用FormData对象上传文件

首先给大家推荐一个图床

在对接接口的时候,需要使用FormData上传,于是就想办法解决了下。

下面是关键的代码

1
2
3
4
<form id="uploadForm" enctype="multiple/form-data" >
<input id="smfile" name="smfile" type="file" multiple >
<input type="button" onclick="send()" value="send">
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
function send() {

var formData = new FormData($('#uploadForm')[0]);

//console.log($('#uploadForm')[0]);

formData.append('format','json');

$.ajax({
type:'post',
url: "https://sm.ms/api/upload",
data: formData,
processData: false,
contentType: false,
success: function (data) {
console.log(data);
}
});
}
</script>

最后补充几点

  • 1、input中声明的是什么,接收的时候就用什么。例如上面的就是smfile
  • 2、processData设置为false。因为data值是FormData对象,不需要对数据做处理。
  • 3、form标签添加enctype=”multipart/form-data”属性。
  • 4、cache设置为false,上传文件不需要缓存。contentType设置为false。因为是由form表单构造的FormData对象,且已经声明了属性enctype=”multipart/form-data”,所以这里设置为false。

Github 不要吝啬你的star ^.^
更多精彩 戳我

Fork me on GitHub