2016-12-05 2 views
-1

У меня есть простой код javascript/jquery, который запрашивает данные из какой-либо веб-службы, которая возвращает данные, которые могут использоваться для создания диаграммы высоких диаграмм. Ответ от сервера не может быть проанализирован в JSON, поскольку он содержит обработчик события щелчка, который не в состоянии быть разобран JSON.parse с ошибкой Unexpected keyword ....Проанализируйте HTTP-ответ, который содержит сериализованный объект с функциями

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 без изменения ответа?

+2

Он пытается разобрать этот ответ как JSON, но это * не * JSON. Вы не * возвращаете JSON. [JSON - это особый формат] (http://json.org/), который поддерживает только строки, числа, объекты, массивы, логические значения и null. У вас не может быть 'function' внутри файла/строки JSON. –

+0

Вы можете попробовать преобразовать функцию в строку, а затем проанализировать функцию как строку с помощью 'eval()' или 'Function' – guest271314

+1

Вы не можете иметь функции в JSON, это чисто формат данных. У вас может быть строка и запустить EVAL на ней или просто иметь имя функции и параметры (т.е. сохранить уже определенную функцию на клиенте и просто указать параметры) –

ответ

2

Вы действительно можете включить функцию, хранящуюся/передаются в виде строки в вызываемый код, если вы используете JSON.stringify with a "replacer" function и JSON.parse with a "reviver" function вместе с new Function()

См this previous post of mine для полного рабочего пример.

+1

Я на самом деле супер противоречил этому ответу. С одной стороны, у вас есть 6-кратная репутация, которую я делаю, поэтому я чувствую, что вы очень хорошо знаете, с другой стороны, это решение похоже на рак. Итак, вы динамично создаете функции и даете им свои тела? Опять у вас есть 6 раз мой результат, но есть ли какие-либо проблемы с XSS? Если нет, то я грустен, что не думал об этом. – bassxzero

+0

Его ужасный взлом, но его ужасный взлом, который делает то, что Бабль просил. Я не могу придумать лучшего способа. –

+0

@bassxzero Способность делать то, что я показываю, стандартно в объекте JSON, встроенном во все современные браузеры. Я не комментирую «если вы передаете функции через HTTP и потребляете их в веб-клиентах». Я предоставляю вам совершенно законный и действительный ответ на ваш вопрос.Кстати, это решение в 10 раз лучше, чем 'eval()' (как было предложено другими), потому что здесь вы контролируете функцию reviver, поэтому вы можете очистить ее от вредоносного контента в соответствии с вашей собственной логикой. –

2

Это то, что я сделал в прошлом.

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

Это решение хорошо, когда на стороне клиента вы определенно знаете, что должна делать функция, но в моем случае функция - это то, что автоматически генерируется на стороне сервера, поэтому нет способа получить что-то вроде этого. И я не могу создать отдельный вызов веб-службы только для того, чтобы получить функции .... Но в любом случае спасибо за помощь .... – Babl

Смежные вопросы