在 GSP 上将 JSON 发送到 javascript

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？我怎样才能解决这个问题？谢谢。

更新： 问题解决了。请参阅已接受答案中的 cmets。

更新 2： 当我今天检查应用程序时，它又失败了。我使用“原始”方法完成了文档所需的操作，但没有运气。一种解决方法是使用“每页编码”。这是我彻底测试过的。它确实有效。

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

工作solution：

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

普惠制页面：

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

在 Groovy 对象上使用 raw() 不会产生与 JavaScript 兼容的输出（请参阅 data1），并且在 JSON 转换器之后使用它会导致不需要的 " 编码（请参阅 data2）。使用encodeAsJSON() 会产生正确的输出（请参阅data3）。

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

更新：
我已经改用 taglib 了：

out << "<script>const 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>

Answer 5

这在 grails 3.1.9 中对我有用。

控制器：

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

[data:result as JSON]

普惠制：

<script>

var data = '${raw(data as String)}';
var json = JSON.parse(data);
alert(json.type);

var authorization = json.key;

</script>

Answer 6

并非所有 grails 版本都支持 raw() 方法或 g:applyCodec taglib。

解决办法是使用 块来避免转义

 <%= users.collect({id:it.id,value:it.name}) as grails.converters.JSON%>

或

<%= someJsString.encodeAsJavascript() %>

但最佳做法是避免在 GSP 中使用服务器端生成的 JSON，并重构为通过 ajax 请求接收相同的 JSON

Answer 7

在 testData.gsp 中添加

<%@page expressionCodec="none" %>

在脚本中

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

Answer 8

这也可能会有所帮助，将数据作为简单模型传递并将其解析为 gsp 中的 JSON。

def testData() {
    def result = [:]
    ...
    [data: result]
}

正在查看

<%! import grails.converters.JSON %>
...
<script>
function parseModelToJS(jsonString)
{
 jsonString=jsonString.replace(/\"/g,'"');
 var jsonObject=$.parseJSON(jsonString);
 return jsonObject
}

$(document).ready(function(){
 var data=parseModelToJS('${data as JSON}');
 console.log(data);
});
</script>

http://www.oodlestechnologies.com/blogs/Parse-model-to-json-on-gsp-in-grails

Answer 9

你可以这样做，

import groovy.json.*
Map testMap = ['name': 'Test']
String jsonData = new JsonBuilder(testMap).toPrettyString()
render(view: view, model: ["data": jsonData], params: [:])

在您的 gsp 中：

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

简单..