将ArraList转换为JSON（Java）并使用Javascript访问它

此项目的目的是选择图像的一个区域，将该区域发送到db，检索该选定区域并绘制选定图像的区域。我有一个数据库，里面有一行行坐标。所以我制作了一个对象区域，用坐标行来表示这个表。ViewArea有四个值：intx1、intx2、inty1和inty2

public class ViewArea extends Area
{
    public ViewArea(int x1, int y1, int x2, int y2)
    {
        super(x1, x2, y1, y2);
    }

}

由于行的数量可能会越来越多，这意味着区域对象的数量也会越来越多，因此我创建了一个带有列表的类AreaInputView。在类的init（）中，我填充列表并将其转换为JSONArray（如谷歌搜索时的示例所示）

---

我的问题是，我无法从javascript访问JSON对象，因为javascript是客户端，而JSON是java，java是服务器端。关键是迭代JSON对象，并为每个对象应用js函数。我可以选择将数据写入一个.js文件中，这样我就可以在那里访问它，但必须有办法解决这个问题。有什么建议吗？

您可能需要创建一个REST服务端点，并将数组内容公开为JSON。然后您应该能够从浏览器中检索JSON并使用它。spring文档中给出了创建这种端点的简单方法，从js向服务器请求JSON。 在服务器端，将JSON对象转换为纯字符串，并返回内容类型为application/JSON

---

您应该有合适的JSON可供使用

感谢您的回复！当然，这是一个有希望的解决方案。但这似乎是不必要的，因为我的新手主管有一种直觉，即我可以在不增加额外依赖项的情况下解决这个问题。虽然我确实将它添加到了我的解决方案中，但我只是想找到最理想的解决方案。我假设您正在编写web应用程序。至少您需要公开一个servlet控制器并将JSON字符串（jsonareality.toString（）将为您提供字符串）写入http响应。否则，您在服务器上所做的一切将无法在浏览器中使用。嘿，谢谢您的回复。是的，你没有指定要使用哪个选项。是的，更具体地说，我使用primefaces 5.1和jsf2.2。如果你使用bean方法将JSONArray分配给js变量，它应该可以正常工作

@ManagedBean
@ApplicationScoped
public class AreaInputView implements Serializable
{

    /**
     * 
     */
    private static final long serialVersionUID = -3957666682646196671L;

    MyDatabase db = new MyDatabase();

    private List<ViewArea> areaList;
    private JSONArray jsonAreaList;

    public List<ViewArea> getAreaList()
    {
        return areaList;
    }


    @PostConstruct
    public void init()
    {
        this.areaList = new ArrayList<ViewArea>();
        populateList();
        this.jsonAreaList = new JSONArray(areaList);
    }



    public JSONArray getJsonAreaList()
    {
        return jsonAreaList;
    }

    public void populateList()
    {
        db.openDatabase();

        try
        {
            db.pstmt = db.con.prepareStatement("SELECT * FROM area");
            ResultSet rs = db.pstmt.executeQuery();

            while (rs.next())
            {
                areaList.add(new ViewArea(rs.getInt("X1"), rs.getInt("X2"), rs.getInt("Y1"), rs
                        .getInt("Y2")));
            }
        }
        catch (SQLException e)
        {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }



}

function viewInput(dx1,dy1,dx2,dy2) {
    var canvas = document.getElementById('home:tempImg');
    var context = canvas.getContext('2d');
    var imageObj = new Image();

    imageObj.onload = function() {
      context.drawImage(imageObj, dx1, dy1,dx2-dx1,dy2-dy1);
    };
    imageObj.src = 'images/selected.png';
}