前言：
平時工作中很少跨域，很少用到jsonp，但是幾乎每次面試都會被問到這個問題。很崩潰。
菜鳥教程上的jsonp教程就很好。這里做個筆記，自己捋一遍。
Jsonp（JSON with Padding）是json的一種使用模式，可以讓網頁從別的域名那獲取資料，即跨域讀取數據。
jsonp需要服務端配合
這里使用菜鳥教程提供的一個地址，任何一台電腦的本地都可以測試使用：http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction
前端，原生js的jsonp代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSONP 實例</title> </head> <body> <div id="divCustomers"></div> <script type="text/javascript"> function callbackFunction(result, methodName) { var html = '<ul>'; for(var i = 0; i < result.length; i++) { html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getElementById('divCustomers').innerHTML = html; } </script> <script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script> </body> </html>
本地測試效果圖：
jQuery使用JSONP代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSONP 實例</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> </head> <body> <div id="divCustomers"></div> <script> $.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) { var html = '<ul>'; for(var i = 0; i < data.length; i++) { html += '<li>' + data[i] + '</li>'; } html += '</ul>'; $('#divCustomers').html(html); }); </script> </body> </html>
摘自： 菜鳥教程-JSONP教程
2019年，加油！