【Day41】Python之路——AJAX
阿新 • • 發佈：2018-03-02
跨域訪問 ref success ica json 設置 ati closed one 
什麽是AJAX
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
優點:
不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容
不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行
ajax請求的本質：生成xmlHttpRequest對象
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible"前端content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>index</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <form action="" method="" > <input type="text" name="k1" value="v1"> <input type="text" name="k2" value="v2"> <input id="forms_btn" type="button" value="提交"> {% csrf_token %} </form> <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> </body> </html>
下面是，前端以json格式 發往後端的JavaScript代碼
<script> $("#forms_btn").click(function () { $.ajax({ url:"/fromData/", type:"post", dataType:"json", headers:{"X-CSRFToken":$("[name=‘csrfmiddlewaretoken‘]").val()}, contentType:"application/json", data:{ "name":$("[name=‘k1‘]").val(), "name":$("[name=‘k2‘]").val(), }, }) }) </script>
註意：
1、設置contentType
2、設置headers
3、data， 在後端接受到是以二進制形式（b‘password=v1&name=v2‘），需要反序列化
4、後臺取數據不能在POST中取，需要在body中取
dataType
前端設置dataType ,後端如果返回的非json數據，後端不能識別，但是不報錯，
使用Ajax跨域
view層
def ajax_send(request): func=request.GET.get("callback") print("func",func) res={"name":"alex"} import json return HttpResponse("%s(‘%s‘)"%(func,json.dumps(res)))
ajax 無法跨域訪問其他網站，
<script> $(".b1").click(function () { $.ajax({ url:"http://127.0.0.1:8002/ajax_send/", // 瀏覽器的同源策略的原因，AJax無法發送跨域請求 success:function (data) { alert(data) } }) }); </script>
下面看如何解決跨域訪問
跨域訪問初級版
<script> function foo(s) { console.log(s); JSON.parse(s) } function kua_yu(url) { // 生成 script標簽 var $ele_script=$("<script>"); 註意：使用了 $ele_script創建標簽 $ele_script.attr("src",url); $ele_script.attr("class","kuayu"); // 添加到body中 $("body").append($ele_script); // 發送請求 $(".kuayu").remove() // 生成之後即刪除，不會產生多余的標簽 } $(".b2").click(function () { kua_yu( "http://127.0.0.1:8002/ajax_send/?callback=foo") }); </script>
跨域訪問進階版
$(".b1").click(function () {
$.getJSON("http://127.0.0.1:8002/ajax_send/?callback=?",function (data) { // function 使用了回調函數，
console.log(data);
})
});
跨域訪問高級版
<script> $(".b1").click(function () { $.ajax({ url:‘http://127.0.0.1:8002/ajax_send/‘, dataType:"jsonp", jsonp: ‘callback‘, jsonpCallback:"SayHi" }); }); $(".b2").click(function () { $.ajax({ url:‘http://www.jxntv.cn/data/jmd-jxtv2.html?‘, dataType:"jsonp", jsonp: ‘callback‘, jsonCallback:"list" // 訪問的函數名，可定制 }); }); function list(data) { console.log(data.data); $.each(data.data,function (i,weekday) { //console.log(j); // {week: "周日", list: Array(19)} $("body").append("<p>"+weekday.week+"</p>"); console.log(weekday.list); $.each(weekday.list,function (j,show) { s="<p><a href=‘"+show.link+"‘>"+show.name+"</a></p>" $("body").append(s); }) }) } </script>
註意:jsonp 一定是GET請求
【Day41】Python之路——AJAX