Question

前段时间我得到了使用json将我的应用程序中的东西传递给java脚本的答案。我不明白的是我如何将对象传递给javascript，我发现你必须使用.json文件。然后什么？我能够将我的java对象转换为JSON对象，但是它的传递让我无法理解。我正在使用JSP和Servlets来编写我的应用程序。如果有人能帮助我，那我将非常感激在此先感谢，
迪安

Answer 1

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"
}

Answer 2

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

这是一个servlet的虚构示例，它根据所选的国家/地区下拉列表返回城市选项值/标签对，它使用Google Gson将完整的Java对象转换为oneliner中的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);
}

在url-pattern中的/cities web.xml上映射此类servlet（或者如果您想要更多SEO友好方法，请将其映射到/cities/*并使用{{ 1}}而不是）。

最后，在更改国家/地区下拉列表期间执行的JS代码中，您只需让它在此servlet上以所选国家/地区作为参数（或pathinfo）触发异步（ajaxical）请求。我将给出一个基于jQuery的示例，因为它疯狂地简化了触发ajax请求和遍历/操作HTML DOM（“原始”JS代码本来可以长达5倍）。

request.getPathInfo()

以下是JSP的相应HTML示例：

$(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"));
            }
        });
    });
});

（假设<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}）

希望这能清除其中一个：）

JSON对象传递帮助

2 个答案:

加载JSON文件

从JSON文件获取数据

另见：