解決頁(yè)面js接受Long型損失精度問(wèn)題(最新解決方案)
一、場(chǎng)景描述
在下面這個(gè)后臺(tái)管理中,當(dāng)我們點(diǎn)擊禁用后,會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求,同時(shí)攜帶這個(gè)員工的19位數(shù)字的id。


請(qǐng)求方式為PUT

這里的禁用對(duì)應(yīng)employee表中的status字段,1為啟用,0為禁用。controller中對(duì)應(yīng)的方法如下:
@PutMapping
public R<String> update(HttpServletRequest request,@RequestBody Employee employee) {
log.info("修改的用戶id為{}", employee.getId());
Long empId = (Long)request.getSession().getAttribute("employee");
employee.setUpdateTime(LocalDateTime.now());
employee.setUpdateUser(empId);
employeeService.updateById(employee);
return R.success("更新員工成功");
}當(dāng)點(diǎn)擊后發(fā)現(xiàn)并沒(méi)有被禁用,數(shù)據(jù)庫(kù)中該用戶的status字段也沒(méi)有更新成功。通過(guò)debug發(fā)現(xiàn)請(qǐng)求發(fā)送時(shí)攜帶id與數(shù)據(jù)庫(kù)中的不同
![]()

而頁(yè)面展示的時(shí)候返回的數(shù)據(jù)id也是正常的

二、問(wèn)題分析
這是因?yàn)轫?yè)面js處理Long型數(shù)據(jù)只能精確到前16位,所以最終ajax提交到服務(wù)器的請(qǐng)求中id后幾位被四舍五入了
三、解決方法
我們可以在服務(wù)端給頁(yè)面響應(yīng)json數(shù)據(jù)時(shí)進(jìn)行處理,將long型數(shù)據(jù)統(tǒng)一轉(zhuǎn)為String字符串,效果如下:

具體實(shí)現(xiàn)步驟:
- 提供對(duì)象轉(zhuǎn)換器Jackson0bjectMapper,基于Jackson進(jìn)行Java對(duì)象到j(luò)son數(shù)據(jù)的轉(zhuǎn)換
- 在WebMvcConfig配置類中擴(kuò)展Spring mvc的消息轉(zhuǎn)換器,在此消息轉(zhuǎn)換器中使用提供的對(duì)象轉(zhuǎn)換器進(jìn)行java對(duì)象到j(luò)son數(shù)據(jù)的轉(zhuǎn)換
/**
* 對(duì)象映射器:基于jackson將Java對(duì)象轉(zhuǎn)為json,或者將json轉(zhuǎn)為Java對(duì)象
* 將JSON解析為Java對(duì)象的過(guò)程稱為 [從JSON反序列化Java對(duì)象]
* 從Java對(duì)象生成JSON的過(guò)程稱為 [序列化Java對(duì)象到JSON]
*/
public class JacksonObjectMapper extends ObjectMapper {
public static final String DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
public static final String DEFAULT_DATE_TIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
public static final String DEFAULT_TIME_FORMAT = "HH:mm:ss";
public JacksonObjectMapper() {
super();
//收到未知屬性時(shí)不報(bào)異常
this.configure(FAIL_ON_UNKNOWN_PROPERTIES, false);
//反序列化時(shí),屬性不存在的兼容處理
this.getDeserializationConfig().withoutFeatures(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES);
SimpleModule simpleModule = new SimpleModule()
.addDeserializer(LocalDateTime.class, new LocalDateTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
.addDeserializer(LocalDate.class, new LocalDateDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
.addDeserializer(LocalTime.class, new LocalTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)))
.addSerializer(BigInteger.class, ToStringSerializer.instance)
.addSerializer(Long.class, ToStringSerializer.instance)
.addSerializer(LocalDateTime.class, new LocalDateTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
.addSerializer(LocalDate.class, new LocalDateSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
.addSerializer(LocalTime.class, new LocalTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)));
//注冊(cè)功能模塊 例如,可以添加自定義序列化器和反序列化器
this.registerModule(simpleModule);
}
}
webmvc配置類
@Configuration
@Slf4j
public class WebMvcConfig extends WebMvcConfigurationSupport {
/*
* 擴(kuò)展MVC框架的消息轉(zhuǎn)換器
*/
@Override
protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
log.info("消息轉(zhuǎn)化器添加成功");
// 創(chuàng)建消息轉(zhuǎn)換器
MappingJackson2HttpMessageConverter converter = new MappingJackson2HttpMessageConverter();
// 設(shè)置對(duì)象轉(zhuǎn)換器,底層使用jackson將java對(duì)象轉(zhuǎn)換為json
converter.setObjectMapper(new JacksonObjectMapper());
// 將上面的消息轉(zhuǎn)換器添加到mvc框架的轉(zhuǎn)換器集合中
converters.add(0, converter);
}
}到此這篇關(guān)于解決頁(yè)面js接受Long型損失精度問(wèn)題的文章就介紹到這了,更多相關(guān)js接受Long型損失精度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript實(shí)現(xiàn)div浮動(dòng)在網(wǎng)頁(yè)最頂上并帶關(guān)閉按鈕效果實(shí)例
我們有時(shí)會(huì)看到有些網(wǎng)站最頂部一直會(huì)跟著我們滾動(dòng)而滾動(dòng)了,這種方法其實(shí)很簡(jiǎn)單,下面我來(lái)給大推薦一個(gè)javascript實(shí)現(xiàn)div浮動(dòng)在網(wǎng)頁(yè)最頂上并帶關(guān)閉按鈕效果2013-08-08
《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記七:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)組合模式詳解
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)組合模式,結(jié)合實(shí)例形式分析了《javascript設(shè)計(jì)模式》中Javascript面向?qū)ο蠼M合模式相關(guān)概念、原理、定義、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
js 調(diào)用百度地圖api并在地圖上進(jìn)行打點(diǎn)添加標(biāo)注
上邊有一個(gè)標(biāo)題,下邊分成兩塊,左邊是地圖。并且地圖上有兩個(gè)點(diǎn),點(diǎn)擊兩個(gè)點(diǎn)有相應(yīng)的提示信息,具體實(shí)現(xiàn)如下2014-05-05
js遍歷添加欄目類添加css 再點(diǎn)擊其它刪除css【推薦】
這篇文章主要介紹了js遍歷添加欄目類添加css 再點(diǎn)擊其它刪除css的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒借鑒價(jià)值,需要的朋友可以參考下2018-06-06
在DWR中實(shí)現(xiàn)直接獲取一個(gè)JAVA類的返回值的兩種方法
本文主要介紹了在DWR中實(shí)現(xiàn)直接獲取一個(gè)JAVA類的返回值的兩種方法,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2016-12-12
javascript計(jì)算對(duì)象長(zhǎng)度的方法
這篇文章主要為大家詳細(xì)介紹了javascript計(jì)算對(duì)象長(zhǎng)度的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
JavaScript判斷數(shù)組是否包含指定元素的方法
這篇文章主要介紹了JavaScript判斷數(shù)組是否包含指定元素的方法,涉及javascript中contains方法的使用技巧,需要的朋友可以參考下2015-07-07

