django跨域jsonp
1.同源策略概念
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,
浏览器只是针对同源策略的一种实现。
同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来
百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,
浏览器会在控制台中报一个异常,提示拒绝访问。
jsonp:其实就是JSON+Padding,json填充.
jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略
1.自己创建标签实现一个jsonp 前端代码
<button class="get_service">JSONP</button>
<script>
function jsp(arg) {
console.log(arg);
console.log(typeof arg);
var data=JSON.parse(arg);
console.log(data);
console.log(typeof data);
}
function get_jsonp_data(url) {
var ele_script=$("<script>");
ele_script.attr("src",url)
ele_script.attr("id","jsonp");
$("body").append(ele_script);
$("#jsonp").remove()
}
$(".get_service").click(function () {
get_jsonp_data("http://127.0.0.1:8008/service/?callbacks=jsp")
});
</script>
后端代码
import json
def service(request): # jsonp
func=request.GET.get("callbacks")
info={"name":"lilei","age":34,"price":200}
return HttpResponse(" ('%s')"%(func,json.dumps(info)))
### jQuery框架也当然支持JSONP,可以使用$.getJSON(url,[data],[callback])方法
**$.ajax实现** **注意 JSONP一定是GET请求**
$(".get_service-4").click(function () {
$.ajax({
url:"http://www.jxntv.cn/data/jmd-jxtv2.html",
type:"get",
dataType:"jsonp", // 伪造ajax 基于script
jsonp: 'callbacks',
jsonpCallback:"list",
success:function (data) {
//console.log(data.data);
var html="";
$.each(data.data,function (index,weekday) {
console.log(weekday); // {week: "周一", list: Array(19)}
html+='<p>'+weekday.week+'</p>';
$.each(weekday.list,function (j,show) {
html+= '<p><a href='+show.link+'>'+show.name+'</a></p>'
})
});
$("body").append(html)
django跨域jsonp
http://www.jcwit.com/article/162/