JSONP должен решить эту проблему. JSONP является аббревиатурой JSON с набивкой на английском языке и является неофициальным протоколом. Это позволяет серверу генерировать теги сценария возвращаемого значения клиента и реализовать доступ к сайту через форму обратного вызова JavaScript. JSONP - это инъекция тега сценария, добавление ответа, возвращаемого сервером на страницу, предназначен для реализации конкретных функций.
Короче говоря, сам JSONP не является сложной вещью, он обходит гомологичную политику браузера через тег SCIPT.
В настоящее время применение Jushi становится все менее и менее эффективным. Многие интернет -компании будут использовать распределенные архитектуры на более поздних этапах.
Тогда есть проблема с вызовом JSON под разными доменными именами на странице
(Cross-Domain: разные доменные имена, те же доменные имена, но разные порты)
JSON, упомянутый в спецификации JavaScript, не может быть вызван непосредственно через домены. Для безопасности это может вызвать фрагменты JS.
Так что оберните JSON в фрагмент JS, то есть JSONP, затем перекрестные запросы
После весны 4.1 предоставляются новые методы в качестве вызовов в JSONP
пример:
@Requestmapping (value = "/list") @Responsebody public object getItemCatlist (строка обратного вызова) {itemCatresult result = itemCatservice.getIteMcatlist (); if (stringutils.isblank (обратный вызов)) {// Результат должен быть преобразован в результат возврата строки; } // Если строка не пустая, вам нужно поддерживать JSONP Call Spring4.1. Mappingjacksonvalue maptingjacksonvalue = new MaptingJacksonValue (результат); mappingjacksonvalue.setjsonpfunction (обратный вызов); вернуть картирование JacksonValue; }Как показано на картинке, это JSONP
Затем, если вам нужно вызовать JSONP, вы можете вызвать данные по доменам после небольшой обработки.
Я сделал пример для отображения JSONP на странице:
(JS немного уродлив. Я родился в бэкэнде, а герои в передней части похлопаны ~)
var menu = function () {return {getMenuData: function (json) {console.log (json); var data = json.data; var html = ""; for (var i = 0; i <data.length; i ++) {var url = data [i] .u; var name = data [i] .n; var sub = data [i] .i; html += "<li class = 'выпадающий Submenu'>"; html += "<span class = 'c-rrow c-toggler'> </span>"; html += "</a>"; html += "<ul class = 'выпадающий меню c-pull-right'>"; for (var j = 0; j <sub.length; j ++) {var url = sub [j] .u; var name = sub [j] .n; var node = sub [j] .i; html += "<li class = 'выпадающий Submenu'>"; html + = "<a href = '" + url + "'>" + name; html += "<span class = 'c-rrow c-toggler'> </span>"; html += "</a>"; html += "<ul class = 'выпадающий меню c-pull-right'>"; for (var k = 0; k <node.length; k ++) {// отладчик var name = node [k]; var last = name.split ("|"); html += "<li>"; html + = "<a href = '" + last [0] + "'>" + last [1] + "</a>"; html += "</li>"; } html += "</ul>"; html += "</li>"; } html += "</ul>"; html += "</li>"; } $ ("#itemCatmenu"). html (html); }, getJsonp: function (serverUrl, callbackfun) {$ .ajax ({type: «get», url: serverUrl, dataType: "jsonp", jsonp: "callback", jsonpcallback: callbackfun, function: function (json) {// console.log (json); {console.log (e); }}; } (); $ (document) .ready (function () {var serverurl = "http: // localhost: 8088/rest/menu/list"; menu.getjsonp (serverurl, "menu.getmenudata");});Показано эффекты: