在GSP上向Javascript发送JSON

Question

我正在使用Grails 2.3.7,我有一个控制器动作如下:

def testData(){
    def result = [:]
    result['name'] = "Sales"
    result['type'] = "bar"
    result['data'] = [5, 20, 45, 10, 10, 20]
    [data: result as JSON]
}

在testData.gsp中,我想在javascript中获取JSON对象:

<script>
    $(document).ready(function(){
        var data = JSON.parse(${data});
    })
</script>

然后我得到一个例外:

Uncaught SyntaxError: Unexpected token {

在线上:

var data = JSON.parse({"name":"Sales","type":"bar","data":[5,20,45,10,10,20]});

看起来JSON搞砸了.我认为它曾经以这种方式工作.也许这是新的Grails？我怎样才能解决这个问题？谢谢.

更新: 问题解决了.请参阅接受的答案中的评论.

Update2: 当我今天检查应用程序时,它再次失败.我用"原始"方法做了文档所需要的但没有运气.解决方法是使用"每页编码".这是我彻底测试过的.它确实有效.

Answer 1

问题是JSON被编码为HTML.请尝试以下方法:

调节器

def testData() {
    def result = [:]
    result['name'] = "Sales"
    result['type'] = "bar"
    result['data'] = [5, 20, 45, 10, 10, 20]
    [data: result as JSON]
}

普遍优惠制

<script>
    var data = ${raw(data)};
</script>

你不需要$(document).ready因为JS代码

var data = ${raw(data)};

在服务器端生成

Answer 2

工作方案:

def action() {
  [data: data as JSON]
}

GSP页面:

<g:applyCodec encodeAs="none">
    var data = ${data};
</g:applyCodec>

Answer 3

该encodeAsJSON()方法适用于将JSON数据输出到JavaScript:

调节器

def testData() {
   def data = [name: "Sales", values: [5, 20, 45]]
   [data: data]
   }

查看(GSP)

<script>
var data1 = ${raw(data)};  //{name=Sales, values=[5, 20, 45]}
var data2 = ${raw(data as grails.converters.JSON)};  //{&quot;name&quot;:&quot;Sales...
var data3 = ${data.encodeAsJSON()};  //{"name":"Sales","values":[5,20,45]}  CORRECT!
</script>

使用raw()一个Groovy对象上不产生的JavaScript兼容输出(见data1),而在不希望的JSON转换器的结果之后,使用它"的编码(见data2).使用encodeAsJSON()产生正确的输出(见data3).

文档:http:
//grails.org/doc/latest/guide/security.html#codecs

更新:
我已切换到使用taglib:

out << "<script>var data = " + raw((data as JSON) as String) + ";</script>"

Answer 4

以下使用 Grails 2.4.3 对我有用：

控制器：

def result = [:]
result['type'] = "bar"
result['data'] = [5, 20, 45]

model: [data: result as JSON]

普惠制：

<script>
// this worked!
var data = ${raw(data as String)};
</script>

产生了想要的结果：

<script>
// this worked!
var data = {"type":"bar","data":[5,20,45]};
</script>

Dónal 接受的答案对我不起作用：

控制器（与我上面的工作示例相同）

GSP（不起作用）：

<script>
// did NOT work!!
var data = ${raw(data)};
</script>

产生了同样的坏结果：

<script>
// did NOT work!!
var data = {&quot;type&quot;:&quot;bar&quot;,&quot;data&quot;:[5,20,45]};
</script>