什么是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请求
原文地址：https://www.cnblogs.com/huyangblog/p/8280330.html
时间： 2024-10-03 14:38:50