Auf einen Blick verstehen: Detaillierte Erklärung von jsonp_jquery

$("#getOtherDomainThings").click(function () {
$.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", Funktion (Daten) {
console.log(data)
})

$.get("http://localhost:2701/home/index", Funktion (Daten) {
console.log(data)
})
})

Funktion CreateScript(src) {
$("<script><//script>").attr("src", src).appendTo("body")<br> }<br> </div> <br> Fügen Sie ein Schaltflächenereignis hinzu, um es auszuprobieren: <br> <div class="codetitle"> <span><a style="CURSOR: pointer" data="4331" class="copybut" id="copybut4331" onclick="doCopy('code4331')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code4331"> <br> $("#getOtherDomainJson").click(function () {<br> $.get('http://localhost:2701/home/somejson', Funktion (Daten) {<br> console.log(data)<br> })<br> })<br> </div> <p><img src="http://files.jb51.net/file_images/article/201506/20156190709927.png?2015519722" alt=""></p> <p>Zuallererst verfügt die URL http://localhost:2701/home/somejson im ersten Browser über einen JSON, und die Verwendung des Skript-Tags auf der 2698-Webseite zum Anfordern der 2701-URL ist ebenfalls in Ordnung. aber unten wird ein js-Syntaxfehler gemeldet. Es stellt sich heraus, dass die Antwort nach dem Laden mit dem Skript-Tag sofort als js ausgeführt wird. Offensichtlich ist {"Email": "zhww@outlook.com", "Remark": "Ich komme aus dem Fernen Osten"} rechtliche js-Anweisung. </p> <p>Verwenden Sie ein Skript, um fremdes JSONP zu erhalten</p> <p>Natürlich ist es am einfachsten, den oben genannten JSON in eine Rückrufmethode einzufügen. Es sieht zum Beispiel so aus: </p> <p><img src="http://files.jb51.net/file_images/article/201506/20156190730417.png?2015519738" alt=""></p> <p>Wenn die jsonpcallback-Methode existiert, dann ist jsonpcallback({"Email": "zhww@outlook.com", "Remark": "Ich komme aus dem Fernen Osten"}) eine legale js-Anweisung. </p> <p>Da der Server den Rückruf des Clients nicht kennt, ist es unmöglich, ihn fest in jsonpcallback zu codieren. Daher wird ein QueryString mitgebracht, damit der Client dem Server mitteilen kann, was die Rückrufmethode ist muss der Vereinbarung des Servers entsprechen, wie oben beschrieben. Es handelt sich um einen „Rückruf“. </p> <p>Rückruffunktion hinzufügen: <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="86577" class="copybut" id="copybut86577" onclick="doCopy('code86577')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code86577"> <br> Funktion jsonpcallback(json) {<br> console.log(json)<br> }<br> </div> <br> Ändern Sie die Parameter der vorherigen Methode leicht: <br> <div class="codetitle"> <span><a style="CURSOR: pointer" data="13280" class="copybut" id="copybut13280" onclick="doCopy('code13280')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code13280"> <br> $("#getJsonpByHand").click(function () {<br> CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")<br> })<br> </div> <p><img src="http://files.jb51.net/file_images/article/201506/20156190749818.png?2015519756" alt=""></p> <p>200OK, der Server gibt jsonpcallback({"Email": "zhww@outlook.com", "Remark": "Ich komme aus dem Fernen Osten"} zurück. Wir haben auch die jsonpcallback-Methode geschrieben, was natürlich der Fall sein wird hingerichtet. OK, ich habe JSON erfolgreich erhalten. Das ist richtig, hier dreht sich alles um JSONP. </p> <p><strong>Verwenden Sie jQuery, um JSONP zu erhalten</strong><br> Bei der obigen Methode müssen Sie ein Skript-Tag einfügen und einen Rückruf definieren, was etwas mühsam ist. Sie können jQuery verwenden, um die gewünschten JSON-Daten direkt abzurufen, genau wie das obige JSONP: <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="33170" class="copybut" id="copybut33170" onclick="doCopy('code33170')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code33170"> <br> $("#getJsonpByJquery").click(function () {<br> $.ajax({<br> ​ ​ URL: 'http://localhost:2701/home/somejsonp',<br>          dataType: „jsonp“,<br>          jsonp: "callback",<br> Erfolg: Funktion (Daten) {<br> console.log(data)<br> }<br> })<br> })<br> </div> <br> Die erhaltenen Ergebnisse ähneln den oben genannten. <p><strong>Zusammenfassung</strong></p> <p>In einem Satz können Sie das Skript-Tag verwenden, um die Same-Origin-Richtlinie zu umgehen und Daten wie folgt abzurufen: jsonpcallback ist die Rückrufmethode, die auf der Seite vorhanden ist, und der Parameter ist der gewünschte JSON. <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="58" class="copybut" id="copybut58" onclick="doCopy('code58')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code58"> <br> jsonpcallback({"Email": "zhww@outlook.com", "Remark": "Ich komme aus dem Fernen Osten"})<br> </div> <p>Native js HINZUFÜGEN:<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="99395" class="copybut" id="copybut99395" onclick="doCopy('code99395')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code99395"> <br> <button id="btn">click</button><br> <script type="text/javascript"><br>     Funktion $(str){<br>         Rückkehr document.getElementById(str)<br>     }<br>     Funktion CreateScript(src) {<br>         var Scrip=document.createElement('script');<br>         Scrip.src=src;<br>         document.body.appendChild(Scrip);<br>     }<br>     Funktion jsonpcallback(json) {<br>             console.log(json);//Object { email="中国", email2="中国222"}<br>     }<br>     $('btn').onclick=function(){<br>       CreateScript("http://localhost:51335/somejson?callback=jsonpcallback")    <br>     }<br> </script>