Javascript 解析包含具有函数的序列化对象的HTTP响应

Javascript 解析包含具有函数的序列化对象的HTTP响应,javascript,jquery,json,ajax,highcharts,Javascript,Jquery,Json,Ajax,Highcharts,我有一个简单的javascript/jquery代码,它从某个web服务请求数据,返回可用于创建highcharts条形图的数据。无法将来自服务器的响应解析为JSON,因为它包含一个无法由JSON解析的单击事件处理程序。parse带有错误意外关键字…. javascript代码如下所示 $.ajax({ type:"POST", url:"service/call" }).done(function( xdata ) { // this is not going to wor

我有一个简单的javascript/jquery代码,它从某个web服务请求数据,返回可用于创建highcharts条形图的数据。无法将来自服务器的响应解析为JSON,因为它包含一个无法由JSON解析的单击事件处理程序。parse带有错误
意外关键字….

javascript代码如下所示

$.ajax({
    type:"POST",
    url:"service/call"
}).done(function( xdata ) {
  // this is not going to work as xdata is not object but plain text
  $('#container').highcharts(xdata);
});
来自服务器的响应如下

{
 "chart" : {
   "type" : "bar"
 },
 "series" : [ {
   "data" : [ 25, 10 ]
 } ],
 "title" : {
   "text" : ""
 },
 "xAxis" : [ {
   "categories" : [ "data1", "data2"],
  "allowDecimals" : false
 } ],
 "yAxis" : [ {
   "title" : {
     "align" : "high",
     "text" : "Some Title"
   },
   "allowDecimals" : false,
   "labels" : {
     "overflow" : "justify"
   },
   "min" : 0
 } ],
 "credits" : {
   "enabled" : false
 },
 "plotOptions" : {
   "bar" : {
     "colors" : [ "#87bdee", "#ffcccc"],
     "colorByPoint" : true,
     "dataLabels" : {
       "enabled" : true
     },
  "point" : {
       "events" : {
         "click" : function(){window.location.href = '/data?type=' + (this.x == 0 ? 'data1' : (this.x == 1 ? 'hold' : (this.x == 2 ? 'data2' : (this.x == 3 ? 'data3' : (this.x == 4 ? 'data4' : (this.x == 5 ? 'data5' : (this.x == 6 ? 'data6' : 'data7')))))) )}
       }
     }
   }
 },
 "tooltip" : {
   "valueSuffix" : " elements"
 },
 "creditOptions" : {
   "enabled" : false
 }
}
我可以访问服务器端和客户端代码


那么,有没有一种简单的方法让事情顺利进行呢?我的意思是如何在不更改响应的情况下创建highchart?

这是我过去所做的

<script type="text/javascript">

   function highChartOnClick() {
       alert('the click worked');
       window.location.href = '/data?type=' + (this.x == 0 ? 'data1' : (this.x == 1 ? 'hold' : (this.x == 2 ? 'data2' : (this.x == 3 ? 'data3' : (this.x == 4 ? 'data4' : (this.x == 5 ? 'data5' : (this.x == 6 ? 'data6' : 'data7')))))) );
   }

    $.ajax({
        type:"POST",
        url:"service/call"
    }).done(function( xdata ) {
         var someConfigurationJSONObject = xdata;
        someConfigurationJSONObject['plotOptions']['bar']['point']['events']['click'] = highChartOnClick;

         $('#container').highcharts(someConfigurationJSONObject);
    });
</script>

函数highChartOnClick(){
警报(“点击成功”);
window.location.href='/data?type='+(this.x==0?'data1':(this.x==1?'hold':(this.x==2?'data2':(this.x==3?'data3':(this.x==4?'data4':(this.x==5?'data5':(this.x==6?'data6':'data7')));
}
$.ajax({
类型:“POST”,
url:“服务/呼叫”
}).done(函数(扩展数据){
var someConfigurationJSONObject=xdata;
someConfigurationJSONObject['plotOptions']['bar']['point']['events']['click']=highChartOnClick;
$(“#容器”).highcharts(someConfigurationJSONObject);
});

这就是我过去所做的

<script type="text/javascript">

   function highChartOnClick() {
       alert('the click worked');
       window.location.href = '/data?type=' + (this.x == 0 ? 'data1' : (this.x == 1 ? 'hold' : (this.x == 2 ? 'data2' : (this.x == 3 ? 'data3' : (this.x == 4 ? 'data4' : (this.x == 5 ? 'data5' : (this.x == 6 ? 'data6' : 'data7')))))) );
   }

    $.ajax({
        type:"POST",
        url:"service/call"
    }).done(function( xdata ) {
         var someConfigurationJSONObject = xdata;
        someConfigurationJSONObject['plotOptions']['bar']['point']['events']['click'] = highChartOnClick;

         $('#container').highcharts(someConfigurationJSONObject);
    });
</script>

函数highChartOnClick(){
警报(“点击成功”);
window.location.href='/data?type='+(this.x==0?'data1':(this.x==1?'hold':(this.x==2?'data2':(this.x==3?'data3':(this.x==4?'data4':(this.x==5?'data5':(this.x==6?'data6':'data7')));
}
$.ajax({
类型:“POST”,
url:“服务/呼叫”
}).done(函数(扩展数据){
var someConfigurationJSONObject=xdata;
someConfigurationJSONObject['plotOptions']['bar']['point']['events']['click']=highChartOnClick;
$(“#容器”).highcharts(someConfigurationJSONObject);
});
如果使用和 连同

有关完整的工作示例,请参见

如果使用和 连同



有关完整的工作示例,请参见

它试图将该响应解析为JSON,但它不是JSON。你不能返回JSON。仅支持字符串、数字、对象、数组、布尔值和null。JSON文件/字符串中不能有
函数
。您可以尝试将函数转换为字符串,然后使用
eval()
function
将函数解析为字符串。JSON中不能有函数,它纯粹是一种数据格式。你可以有一个字符串并在其上运行EVAL,或者只是有函数名和参数(即在客户端上保留已定义的函数,并提供参数)@RocketHazmat是的,我知道,所以我想知道是否有一种简单的方法可以使用我从服务器得到的响应创建图表:)更新了问题,刚刚删除了关于JSON的所有内容,所以我有一个服务,它返回一些需要用于创建highchart的数据……它试图将该响应解析为JSON,但它不是JSON。你不能返回JSON。仅支持字符串、数字、对象、数组、布尔值和null。JSON文件/字符串中不能有
函数
。您可以尝试将函数转换为字符串,然后使用
eval()
function
将函数解析为字符串。JSON中不能有函数,它纯粹是一种数据格式。你可以有一个字符串并在其上运行EVAL,或者只是有函数名和参数(即在客户端上保留已定义的函数,并提供参数)@RocketHazmat是的,我知道,所以我想知道是否有一种简单的方法可以使用我从服务器得到的响应创建图表:)更新了问题,刚刚删除了关于JSON的所有内容,所以我有一个服务,它返回一些数据,这些数据需要用来创建highchart…我对这个答案非常矛盾。一方面,你的声誉是我的6倍,所以我觉得你最清楚,另一方面,这个解决方案看起来像癌症。所以你动态地创建函数并赋予它们主体?同样,你的分数是我的6倍,但是这有什么XSS问题吗?如果不是的话,我很难过我没有想到这一点。这是一个可怕的黑客行为,但它是一个可怕的黑客行为,符合巴布的要求。我想不出更好的方法了。@bassxzero我所展示的功能是所有现代浏览器内置的JSON对象的标准功能。我没有提供任何关于“是否应该通过HTTP传递函数并在web客户端中使用它们”的评论。我为你的问题提供了一个完全合法和有效的答案。顺便说一句,这个解决方案比
eval()
(正如其他人所建议的那样)好10倍,因为在这里,你可以控制恢复程序功能,因此你可以根据自己的逻辑清除它的恶意内容。我喜欢@ScottMarcus解决方案,它不需要服务器端的更改。@Babl哦,它确实需要。字符串化发生在服务器上,因此
JSON.stringify(obj,replace)
必须在服务器上。我对这个答案非常矛盾。一方面,你的声誉是我的6倍,所以我觉得你最清楚,另一方面,这个解决方案看起来像癌症。所以你动态地创建函数并赋予它们主体?同样,你的分数是我的6倍,但是这有什么XSS问题吗?如果不是的话,我很难过我没有想到这一点。这是一个可怕的黑客行为,但它是一个可怕的黑客行为,符合巴布的要求。我想不出比这更好的办法了。我没有能力做什么