什么是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请求