如何使用 JSON 将对象从 Java 传递到 JavaScript？答案

【问题标题】：How to pass objects from Java to JavaScript using JSON?如何使用 JSON 将对象从 Java 传递到 JavaScript？
【发布时间】：2011-03-23 17:11:36
【问题描述】：

不久前，我得到了使用 JSON 将内容从我的应用程序传递到 JavaScript 的答案。我不明白的是我实际上是如何将对象传递给 JavaScript 我看到你必须使用 .json 文件。

然后呢？我能够将我的 Java 对象转换为 JSON 对象，但我无法理解这一点。我正在使用 JSP 和 Servlet 来编写我的应用程序。

【问题讨论】：

标签： javascript json jsp servlets

【解决方案1】：

文件扩展名.json 不太相关。这只是关于 HTTP Content Type 标头的全部内容。只要它是application/json，网络浏览器就完全知道如何处理它。就 JSP/Servlet 而言，您基本上需要创建一个 servlet 类，它侦听某个 url-pattern，相应地处理请求参数或路径信息，并在 doGet() 方法中将 JSON 字符串写入响应。

这是一个虚构的 servlet 示例，它根据国家/地区下拉列表的选定值返回城市选项值/标签对，它使用 Google Gson 将完全有价值的 Java 对象转换为单列中的 JSON：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String country = request.getParameter("country");
    Map<String, String> cities = cityDAO.find(country);
    String json = new Gson().toJson(cities);
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);
}

在web.xml 中的/cities 或url-pattern 上映射这样的servlet（或者，如果您想要对SEO 更友好的方法，请将其映射到/cities/* 并改用request.getPathInfo()）。

最后，在国家下拉菜单的 onchange 期间执行的 JS 代码中，您只需让它在这个 servlet 上触发一个异步（ajaxical）请求，并将所选国家作为参数（或路径信息）。我将给出一个基于jQuery 的示例，因为它极大地简化了触发 ajax 请求和遍历/操作 HTML DOM（否则“原始”JS 代码将长达 5 倍）。

$(document).ready(function() {
    $('#country').change(function() {
        var selectedCountry = $(this).val();
        var servletUrl = 'cities?country=' + selectedCountry;

        $.getJSON(servletUrl, function(options) {
            var city = $('#city');
            $('>option', city).remove(); // Clean old options first.
            if (options) {
                $.each(options, function(value, label) {
                    dropdown2.append($('<option/>').val(value).text(label));
                });
            } else {
                dropdown2.append($('<option/>').text("Please select country"));
            }
        });
    });
});

以下是 JSP 的相应 HTML 示例：

<select id="country" name="country">
    <c:forEach items="${countries}" var="country">
        <option value="${country.key}">${country.value}</option>
    </c:forEach>
</select>
<select id="city" name="city">
    <option>Please select country</option>
</select>

（假设${countries} 是应用范围内的Map<String, String>）

希望这可以清除一个和另一个:)

另见：

【讨论】：

【解决方案2】：

JSON 基本上是一种 Javascript 对象存储格式。所以，它是 JavaScript 原生的。

加载 JSON 文件

您可以像这样在加载网页时加载 JSON 文件，就像任何 .js 文件一样：

<html>
<head>
<script type="text/javascript" src="myfile.json"></script>
</head>

—clipped—

拥有回调函数或在 JSON 加载时调用的函数也很重要。例如，“myfile.json”的内容应该是：

anz([arbitrary JSON here]);

anz() 在某处被定义为：

function anz(JSONdata) {
    //process data here
}

JSON 也可以是dynamically loaded，或者在页面渲染/加载后加载。

从 JSON 文件中获取数据

因此，一旦您有一个以某种方式加载的 JSON 文件，并使用 JSON 数据调用您的回调函数，您就可以读取它 — 就像任何其他 Javascript Object。

如果这被传递给你的回调函数……

{"data":{"user_name":"Joe", "user_id":"97304239042", "user_rank":3}}

…获取用户名：

function anz(JSONdata) {
    var userName = JSONdata.data.user_name;
    // userName returns "Joe"
}

【讨论】：