如何将json对象从java传递到javascript？答案

【问题标题】：how to pass json object from java to javascript?如何将json对象从java传递到javascript？
【发布时间】：2012-03-29 09:42:45
【问题描述】：

我正在尝试将数据从 spring 控制器传递到 javascript，但没有运气。我应该使用 ajax 来做到这一点吗？请你能给我一些关于如何做到这一点的提示吗？最好的方法是什么？

在我的控制器中，我尝试传递数据：

@RequestMapping(value = "/map", method = RequestMethod.GET)
public String map(ModelMap model) {

...

model.addAttribute("trackpoints", json);


return "map";

}

其中 json 是一个 gson 对象（JsonObject），包含：

{"trackpoints":[{"latitude":52.390556,"longitude":16.920295},
{"latitude":52.390606,"longitude":16.920262}]}

在我的 jsp 文件中，我有：

<script type="text/javascript">

var myJSON = {};

myJSON = ${trackpoints};

document.writeln(myJSON.trackpoints);

</script>

但结果是：

[object Object],[object Object]

我会更详细地解释这一点：>

我想使用谷歌地图 api 来显示地图并绘制从许多纬度、经度协调的路径。我认为 json 会比 list 更好，但我可能是错的。

我尝试调整文档中的代码 - 在下面的代码中，我尝试用循环替换硬编码的坐标，以及来自 json 对象的值。

<script type="text/javascript">
function initialize() {
    var myLatLng = new google.maps.LatLng(0, -180);
    var myOptions = {
        zoom : 3,
        center : myLatLng,
        mapTypeId : google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
    var flightPlanCoordinates = [
            new google.maps.LatLng(37.772323, -122.214897),
            new google.maps.LatLng(21.291982, -157.821856),
            new google.maps.LatLng(-18.142599, 178.431),
            new google.maps.LatLng(-27.46758, 153.027892) ];
    var flightPath = new google.maps.Polyline({
        path : flightPlanCoordinates,
        strokeColor : "#FF0000",
        strokeOpacity : 1.0,
        strokeWeight : 2
    });

    flightPath.setMap(map);
}
</script>

我希望现在更清楚:)

【问题讨论】：

标签： java javascript json spring

【解决方案1】：

myJSON.trackpoints 是一个包含两个对象的数组。如果你想把它写成 HTML，你可以这样做：

function writeCoordinates(coords) {
    document.writeln('<div>lat = ' + coords.latitude);
    document.writeln(', lon = ' + coords.longitude + '</div>');
}

int len = myJSON.trackpoints.length;
for (int i = 0; i < len; i++) {
    writeCoordinates(myJSON.trackpoints[i]);
}

顺便说一句：当您使用 AJAX 请求时，JSON 非常有用，但对于“普通”请求，最好将纯 Java 对象放入模型中，例如：

弹簧控制器：

List<Coordinate> trackpoints = ...
model.addAttribute("trackpoints", trackpoints);

JSP：

<c:forEach items="${trackpoints}" var="coord">
    <div>lat = ${coord.latitude}, lon = ${coord.longitude}</div>
</c:forEach>

假设Coordinate 类具有getLatitude() 和getLongitude() 方法。 Spring 控制器中的该方法甚至可以用于“普通”和 AJAX 请求，通过使用 JSON 编码器，如 Jackson 和 ContentNegotiatingViewResolver。

【讨论】：

【解决方案2】：

看看：http://jsfiddle.net/AHue8/4/

我想这里的要点是您需要指定跟踪点对象中的哪个元素，并控制这些元素在浏览器中的显示方式。由于“trackPoint”不是原始数据类型（它是一个具有 2 个数据元素纬度和经度的对象），浏览器不知道如何解释它，所以你必须告诉它如何解释。

【讨论】：

【解决方案3】：

我有同样的需求：将 Java 对象列表从 Spring 引导控制器传递给 Javascript 代码（作为 Json 对象处理），我找到了解决方案：

在 Java 中

获取MyObject的列表，将其转换为等效的文本Json表示并附加到模型中，结果如下所示：

import com.google.gson.Gson;

@Service
public class MyService {

    private static final Gson GSON = new Gson();
    
    
    public void getData(final Model model) {
        List<MyObject> myObjectList = getObjects...
        model.addAttribute("myObjectListAsJsonText", GSON.toJson(myObjectList));
    }
    
}

在 JSP/HTML 页面中（不在单独的 JS 文件中）

添加脚本块获取MyObject列表的Json表示，并将其转换为Javascript可以处理的Json数组：

<title>MyApp | Main page</title>
<link rel="shortcut icon" href="resources/img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script  th:inline="javascript">
    var myObjectListAsJson = '${myObjectListAsJsonText}';
    var myObjectJsonArray = JSON.parse(myObjectListAsJson);
</script>

在同一页面的任何单独的 Javascipt 文件中

可以访问保存 MyObject 项的 Json 数组的全局变量 myObjectJsonArray，例如：

function processMyObjectJsonArray() {
    for (var index = 0; index < myObjectJsonArray.length; index++) {
        var myObjectJsonItem = myObjectJsonArray[index];
        console.log("Can access ID attribute of an item of MyObject array:" + myObjectJsonItem.id);
    }
}

【讨论】：