正确返回带有嵌入式 JS 函数的 JSON 对象

Question

更新帖子

我有一个目前为止对我有用的问题的解决方案（仅在 Firefox 上测试过）。我的主要目标是用 Ajax 动态更新 Flot 图表。我还需要动态更新轴样式，您可以通过 tickFormatter 选项执行此操作。为了避免我以前遇到的问题，我只是在 PHP 数组中插入所需的 return 字符串 ，然后 JSON 对该数组进行编码。在 returned 到 Ajax 函数后，我使用 javascript Function() 构造函数 (Link) 创建了一个新函数。我希望这对某人有所帮助。

Ajax

$.ajax({
    url: 'someControllerWhichCreatesJSONdata',
    data: 'some Value',
    type: 'post',
    cache: false,
    datatype: 'json'
})
.success(function(data) {
    var datas = data[0];    // fetch data array
    var options = data[1];  // fetch options array
    var xReturn = options.xaxes[0].tickFormatter; // fetch return string
    var yReturn = options.yaxes[0].tickFormatter;        
    var xFunc = new Function("val", "axis", xReturn); // create function
    var yFunc = new Function("val", "axis", yReturn);
    options.xaxes[0].tickFormatter = xFunc; // update tickFormatter with function
    options.yaxes[0].tickFormatter = yFunc;

    $.plot($("#yw0"), datas, options);
})
.error(function(data) {
    $("#error").html(data.responseText); // show error in separate div
});

PHP数组

$options = array(
    'legend' => array(
        'position' => 'nw',
        'show' => true,
        'margin' => 10,
        'backgroundOpacity' => 0.5
    ),
    'grid' => array(
        'clickable' => true,
        'hoverable' => true
    ),
    'pan' => array('interactive' => true),
    'zoom' => array('interactive' => true),
    'axisLabels' => array('show' => true),
    'xaxes' => array(
        array(
            'axisLabel' => 'someUnit',
            'tickFormatter' => 'return "foo bar"' // enter whatever return value you need
        )
    ),
    'yaxes' => array(
        array(
            'axisLabel' => 'someUnit',
            'tickFormatter' => 'return "foo bar"'
        )
    )
);

我跳过数据数组，因为它看起来很相似。两个数组合并并 JSON 编码。

public function actionSomeControllerWhichCreatesJSONdata() {
   $returnArray = array($data, $options);
   echo json_encode($returnArray);
   return true;
}

生成的数组看起来像我在 post 底部编辑的那个 post。

原帖

我现在已经尝试了几个小时，但我无法让它工作。

我有一个 Ajax 请求，成功时它获得一个 JSON 对象作为 return 值。只要我不在我的 JSON 数组中使用 JS 函数，它就可以正常工作。所以我的 JSON 数组看起来如下 (after json_encode):

[{
  "data": [{
    {1,2},
    {3,4},
  }],
  "function": "function(){return \"foo bar\";}"
}]

为了摆脱函数字符串中的"。我使用str_replace并替换带引号的字符串和不带引号的字符串。这看起来像这样：

[{
  "data": [{
    {1,2},
    {3,4},
  }],
  "function": function(){return "foo bar";}
}]

普通的 json_encode 工作正常，我的 Ajax 函数将它读取为 JSON 对象。在我替换字符串后，发现 return 值不再是 JSON 对象，而是一个纯文本字符串。我试图用 jquery.parseJSON() 再次解析字符串，但这会导致语法错误：

SyntaxError: JSON.parse: unexpected keyword at line 1 column 396 of the JSON data

Ajax函数：

$.ajax({
    url: 'someControllerWhichCreatesJSONdata',
    data: 'some Value',
    type: 'post',
    cache: false,
    datatype: 'json' // or text when trying to parse
})
.success(function(data) {
    console.log(data);
    var dat = jQuery.parseJSON(data);  // trying to parse (only when dataType: "text")
    var datas = dat[0];                // or data[0] when datType = json
    var options = dat[1];              // ---
    $.plot($("#yw0"), datas, options); // trying to update a FLOT window
})
.error(function(data) {
    console.log("error");
    $("#error").html(data.responseText); // show error in separate div
});

所以在使用这个函数时，将return类型设置为"json"，会报错。如果 return 类型是 "text" 并且我尝试解析字符串，我得到上面的错误。这个问题有什么解决办法还是我做错了什么？

感谢您的帮助！

更新抱歉，我的 JSON 数据当然无效！正如我所说，我的 JSON 对象是由 json_encode 创建的，我想它的语法应该是正确的。 son_encode 之后的普通数组如下所示：

[[{
   "data":[[0.0042612,0.0042612]],
   "label":"WISE.W3: Cutri et. al 2012",
   "lines":{"show":false},
   "points":{"show":true,"radius":3}}],
  {
   "legend": {
        "position":"nw",
        "show":true,
        "margin":10,
        "backgroundOpacity":0.5},
   "grid": {
        "clickable":true,
        "hoverable":true},
   "pan":{"interactive":true},
   "zoom":{"interactive":true},
   "axisLabels":{"show":true},
   "axisLabel": {
        "unit":"Jy",
        "id":null,
        "name":null},
   "tickFormatter":"$tickFormatter$",
   "position":"right"
}]

在str_replace之后我得到

[[{
   "data":[[0.0042612,0.0042612]],
   "label":"WISE.W3: Cutri et. al 2012",
   "lines":{"show":false},
   "points":{"show":true,"radius":3}}],
  {
   "legend": {
       "position":"nw",
       "show":true,
       "margin":10,
       "backgroundOpacity":0.5},
   "grid":{"clickable":true,"hoverable":true},
   "pan":{"interactive":true},
   "zoom":{"interactive":true},
   "axisLabels":{"show":true},
   "axisLabel":{"unit":"Jy","id":null,"name":null},
   "tickFormatter":function(val, axis){return val.toExponential(2)},
   "position":"right"
 }]

Answer 1

JSON 不能包含这样的函数。但是，您可以使用 Javascript 将函数注入 DOM，因此您要做的是跳过 str_replace 部分，只需在 [=] 中创建一个 <script type="text/javascript"></script> 元素15=] 并将 data.function 属性插入其中。

Answer 2

Adeno 已经指出，您的 JSON 语法无效。请尝试使用 linter 验证您的 JSON，例如 http://jsonformatter.curiousconcept.com/

这个好一点：

[{"data":[["1","2"],["3","4"]],"function":"function(){return \"foo bar\";}"}]

另一件事是：你不应该手动反序列化 JSON。 jQuery 的所有较新版本将根据响应的 content-type header 自动反序列化 JSON。

您已经将 ajax 请求的数据类型设置为 json。响应是 JSON 并且将是 de-serialized。所以可以直接使用

.success: function(response) {
    console.log(response.data);
    console.log(response.function);
}

从评论中回答 questions/issue：

现在您又创建了无效的 JSON，因为 "tickFormatter" : function(val, axis){return val.toExponential(2)}, 遗漏了函数字符串两边的引号。

在使用 str_replace() 插入字符串之前，您需要注意转义和引号。您可能需要一些辅助函数，它可以正确地转义字符串 - 以使其有效 JSON。
您需要正确使用 str_replace()：不替换外引号，只替换内引号 $tickFormatter$ .

等等..我举个例子:

    // we already have an array, which is JSON encoded
    // now you want to insert additional JSON content.
    // therefore we use a token replace approach.

    // valid JSON - with $token$

    $json = '[{"data":[["1","2"],["3","4"]],"tickFormatter":"$tickFormatter$"}]';

    // the (future) javascript function is a string.
    // it's not properly escaped or quoted to be JSON
    // this allows for copy and pasting JS into PHP
    $unescaped_functionString = 'function(){return "foo bar";}';

    // in order escapre properly, we need a json escaping helper

    /**
     * @param $value
     * @return mixed
     */
    function escapeJsonString($value) { # list from www.json.org: (\b backspace, \f formfeed)
        $escapers = array("\", "/", "\"", "\n", "\r", "\t", "\x08", "\x0c");
        $replacements = array("\\", "\/", "\\"", "\n", "\r", "\t", "\f", "\b");
        $result = str_replace($escapers, $replacements, $value);
        return $result;
    }

    // then we escape the function string

    $functionString = escapeJsonString($unescaped_functionString);

    // now its ready to be inserted into the existing JSON,
    // where token $tickFormatter$ is defined
    // the token must be in single quotes. you replace just the $token$ and not "$token$".

    $json = str_replace('$tickFormatter$', $functionString, $json);

    echo $json;

    // The result is valid JSON again:
    // [{"data":[["1","2"],["3","4"]],"tickFormatter":"function(){return \"foo bar\";}"}]

下一步： ajax请求发出，json数据传输到客户端，你想执行你传入的函数。

所以新问题是"How to call/exec a JavaScript function from a string - without using eval?"

一般来说，隧道是一种不好的做法，请参阅：Is it valid to define functions in JSON results?

无论如何，有不同的方法可以做到这一点：

引用：http://everythingfrontend.com/posts/studying-javascript-eval.html

eval() - 邪恶，但有效。
setTimeout()
```
setTimeout(" function ", 0); 
```

新函数()

var codeToExecute = "My.Namespace.functionName()";
var tmpFunc = new Function(codeToExecute);
tmpFunc();

document.write

document.write('<script> JS </script>')

数据 URI

var s = document.createElement('script');
s.src = 'data:text/javascript,' + encodeURIComponent('alert("lorem ipsum")')
document.body.appendChild(s);

正确返回带有嵌入式 JS 函数的 JSON 对象

Properly returning a JSON object with an embedded JS function

javascript

php

ajax

json

flot

更新帖子

原帖