JSONP doit résoudre ce problème. JSONP est l'abréviation de JSON avec un rembourrage en anglais et est un protocole non officiel. Il permet au serveur de générer des balises de script RETOUR VALEUR Client et réaliser l'accès du site via la forme de rappel JavaScript. JSONP est une injection de balise de script, ajoutant la réponse renvoyée par le serveur à la page consiste à implémenter des fonctions spécifiques.
En bref, JSONP lui-même n'est pas une chose compliquée, elle contourne la politique homologue du navigateur via la balise SCIPT.
De nos jours, l'application de Jushi devient de moins en moins efficace. De nombreuses sociétés Internet utiliseront des architectures distribuées dans les derniers stades.
Ensuite, il y a un problème avec l'appel JSON sous différents noms de domaine sur la page
(Domain croisé: différents noms de domaine, mêmes noms de domaine mais différents ports)
Le JSON mentionné dans la spécification JavaScript ne peut pas être appelé directement entre les domaines. Pour la sécurité, il peut appeler des fragments JS.
Alors enveloppez JSON dans un fragment JS, c'est-à-dire JSONP, puis les demandes de domaine croisé
Après le printemps 4.1, de nouvelles méthodes sont fournies en tant qu'appels à JSONP
exemple:
@RequestMapping (value = "/ list") @ResponseBody Public Object getItemcatList (String Callback) {itemcatResult result = itemcatService.getItemcatList (); if (stringUtils.isblank (callback)) {// Le résultat doit être converti en un résultat de retour de chaîne; } // Si la chaîne n'est pas vide, vous devez prendre en charge JSONP Call Spring4.1. Mappingjacksonvalue mappingjacksonvalue = new mappingjacksonvalue (résultat); mappingjacksonvalue.setjsonpfunction (callback); retour mappingjacksonvalue; }Comme indiqué sur l'image, c'est JSONP
Ensuite, tant que vous devez appeler JSONP, vous pouvez appeler des données sur des domaines une fois un peu de traitement requis.
J'ai fait un exemple pour afficher JSONP sur la page:
(JS est un peu moche. Je suis né dans le backend, et les héros à l'avant sont tapotés ~)
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 = 'dropdown-submenu'>"; html + = "<span class = 'c-arrow c-toggler'> </span>"; html + = "</a>"; html + = "<ul class = 'dropdown-menu c-pull-right'>"; pour (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 = 'dropdown-submenu'>"; html + = "<a href = '" + url + "'>" + name; html + = "<span class = 'c-arrow c-toggler'> </span>"; html + = "</a>"; html + = "<ul class = 'dropdown-menu c-pull-right'>"; pour (var k = 0; k <node.length; k ++) {// debugger var name = node [k]; var dernier = name.split ("|"); html + = "<li>"; html + = "<a href = '" + dernier [0] + "'>" + dernier [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, success: function (jsonp) {// console.log (json);}, erre {console.log (e);}}}); }}; } (); $ (document) .ready (function () {var serverurl = "http: // localhost: 8088 / rest / menu / list"; menu.getjsonp (serverurl, "menu.getMenudata");});Effets montrés: