作者lueichun (= =)
看板java
标题[问题] 在Spring,回传物件给JQuery Ajax回调函数
时间Mon Mar 28 12:37:54 2022
※状况概述：
就是我写的一段测试CODE，可以回传Map或是JSON格式的字串，透过HttpResponse的Body
回传，然後Map和字串被jQuery Ajax的回调函数取得，进而取出Map和字串里面的value。
※程式码：
以下是透过servlet回传一个map：
@RequestMapping(value = "/search/api/getSearchResult.do")
public Map<String,Object> getSearchResultViaAjax(HttpServletRequest request)
{
Map<String,Object> map = new HashMap<>();
String username = request.getParameter("username");
String email = request.getParameter("email");
map.put("username", username);
map.put("email", email);
return map;
}
以下是透过servlet回传json格式字串：
@RequestMapping(value = "/search/api/getSearchResult1.do")
public String getSearchResultViaAjax1(HttpServletRequest request) {
//透过ajax传送query string，直接用getParameter取值
Map<String,Object> map = new HashMap<>();
String username = request.getParameter("username");
String email = request.getParameter("email");
map.put("username", username);
map.put("email", email);
String json = new Gson().toJson(map);
return json;
}
然後map跟json格式字串回传回前端的回调函数：
$.getJSON(
"/TestSpring4Ajax2/search/api/getSearchResult1.do",
$.param(search),
function(data) {
var json = "<h4>Ajax Response</h4><pre>"
+
data.email + "</pre>";
$('
#feedback').html(json);
});
※补充说明：
以上的code没有问题可正常执行，但我不懂的是为何java物件传回去後，可以直接当成
JavaScript物件来使用，是jQuery有做甚麽转换？或是javaScript本身支援这种用法？？
我目前知道的是上面那个data物件是JavaScript物件，所以才可以直接用
属性名称来取值(data.email)。然後从servlet回传的又是java物件，看起来就很像是
java物件在回传过程中转换成对应的JavaScript物件，可是这样理解感觉很怪，
请问有更好的理解方式吗？？或是说为何可以直接把回调函数的参数，当成一般的
JavaScript物件来使用？？
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 101.10.6.169 (台湾)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/java/M.1648442276.A.373.html
1F：推 LPH66: 注意到中间的 .toJson 方法, 它帮你把 Java 物件 map 转成 03/28 13:11
2F：→ LPH66: 中介的 JSON 格式, 在网路上传递的是这个格式的物件 03/28 13:12
3F：→ LPH66: 前端的 javascript 收到这个格式後再将其转成 js 的物件 03/28 13:12
4F：→ LPH66: $.getJSON 即是前端接收用的函数, 它把 JSON 解码後传进 03/28 13:13
5F：→ LPH66: 你的 callback 的 data 参数上 03/28 13:13
6F：→ LPH66: 也就是说, 你的问题在不知道中间有一层中介的 JSON 格式 03/28 13:14
7F：→ LPH66: 以为是後端的 Java 物件直接变成前端的 JavaScript 物件 03/28 13:14
我刚刚又测试了以下CODE，将$.getJSON改成$.get、$.post：
$.post(
"/TestSpring4Ajax2/search/api/getSearchResult2.do",
$.param(search),
function(data) {
//第一种获得javascript物件的方法
//var obj = eval('(' + data + ')');
//第二种获得javascript物件的方法
var obj = JSON.parse(data);
var json = "<h4>Ajax Response</h4><pre>"
+ obj.email + "</pre>";//javascript物件
$('
#feedback').html(json);
}
);
---------------------------------------
使用$.get、$.post时，回调函数的参数必须先另外转成javascript物件，才可以直接使用
所以这是因为$.get、$.post没有将中介的json格式的物件，转成javascript物件，
所以必须回调函数接收到参数，另外转成javascript物件？？
9F：→ ssccg: 文件写的很清楚，data是用$.parseJSON()解析response而来 03/28 14:52
10F：→ ssccg: $.get、$.post这些都一样是$.ajax的捷径版，重点在dataType 03/28 14:57
11F：→ ssccg: 设为'json'，不过预设的Intelligent Guess只要server有回适 03/28 14:59
12F：→ ssccg: 当的content-type header，也是会自动parseJSON 03/28 14:59
13F：→ ssccg: 你可以试看看$.get(url, function(data) {...}, 'text')和 03/28 15:02
14F：→ ssccg: $.get(url, function(data) {...}, 'json') data是什麽型别 03/28 15:03
谢谢，讲得真是清楚。
※ 编辑: lueichun (101.10.6.169 台湾), 03/28/2022 15:19:52
15F：→ ssccg: server端的spring如果是@RestController/@ResponseBody，回 03/28 15:22
16F：→ ssccg: 传值会经过HttpMessageConverter转换，预设的有byte[] → 03/28 15:23
17F：→ ssccg: application/octet-stream、String → text/plain 03/28 15:24
18F：→ ssccg: Resource → 看resource档案种类 03/28 15:25
19F：→ ssccg: 其他各种物件 → application/json (看classpath上有哪个 03/28 15:26
20F：→ ssccg: json library会有不同的预设converter) 03/28 15:27
21F：→ ssccg: Map会变成JSON字串是因为有converter，String不会再转换 03/28 15:28
22F：推 Benny327: 简单讲就是中间有一个 “JSON格式的字串” 当作中介格 08/28 19:36
23F：→ Benny327: 式 08/28 19:36
24F：→ Benny327: JS和Java都可以转换解析这种字串成为自己的物件 08/28 19:36