DJANGO环境搭建:
目录文件:
关闭CSRF
添加目录文件路径
配置url
视图配置:
index页面配置:
测试:(成功)
进入正题:
ajax 通过GET提交数据至后台:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{# get请求:#}
<a class="tj" onclick="a1()">提交</a>
<a class="tj" onclick="a2()">提交</a>
<script src="/static/js/jquery-1.12.4.min.js"></script>
<script>
{#第一种依赖jquery方式#}
function a1() {
$.ajax(
{
url:'/aj1.html',
type:'GET',
data:{'p':123},
{#回调函数#}
success:function (arg) {
}
})
}
{#第二种原生DOM发送 不依赖jquery#}
function a2() {
var xhr = new XMLHttpRequest();
xhr.open('GET','/aj1.html?p=321');
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
{#这里readystate是一个状态码:有0,1,2,3,4,其中4是页面加载完成后执行#}
console.log(xhr.responseText);
}
};
xhr.send(null);
}
</script>
</body>
</html>
除了index页面修改以外其他配置都不需要修改
测试结果:
ajax 通过POST提交数据至后台:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{# get请求:#}
<a class="tj" onclick="a1()">提交</a>
<a class="tj" onclick="a2()">提交</a>
<script src="/static/js/jquery-1.12.4.min.js"></script>
<script>
{#第一种依赖jquery方式#}
function a1() {
$.ajax(
{
url:'/aj1.html',
type:'POST',
data:{'p':123},
{#回调函数#}
success:function (arg) {
}
})
}
{#第二种原生DOM发送 不依赖jquery 注意!! django框架 默认需要添加请求头#}
{#发送数据不在是在url里,而是在最后的send里面发送数据#}
function a2() {
var xhr = new XMLHttpRequest();
xhr.open('POST','/aj1.html');
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
console.log(xhr.responseText);
}
};
{#django 默认需要请求头,才能解析数据,所以需要加请求头#}
xhr.setRequestHeader('Content-type',"application/x-www-form-urlencoded");
{#send为POST 数据#}
xhr.send("p=321");
}
</script>
</body>
</html>
除了index页面修改以外其他配置都不需要修改
测试结果:
伪ajax 提交数据至后台(一般方式,有依赖jquery):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{#伪ajax请求 iframe + form 标签绑定方式#} {#知识点!!!#}
{#标签绑定事件 传递(this)这个值是 函数内this代表标签本身,若不传递this则代表windows类#}
{#DOM/jquery绑定事件 不需要传递this这个参数,绑定事件本身就是this,在函数内this代表标签本身#} {#GET/POST 提交方式取决于form表单 提交的method参数#} {#GET提交#}
{#html代码开始#}
<iframe id="p11" name='ifr' style="width: 100%;height:300px;display: block" onload="a2(this)"></iframe>
<form class='form_1' method="GET" action="/aj1.html" target="ifr">
<input type="text" class="in" name="p" value="123">
<input type="submit" onclick="a1()" value="提交">
</form>
{#html代码结束#} {#POST提交#}
{#html代码开始#}
{#<iframe id="p11" name='ifr' style="width: 100%;height:300px;display: block" onload="a2(this)"></iframe>#}
{#<form class='form_1' method="POST" action="/aj1.html" target="ifr">#}
{#<input type="text" class="in" name="p" value="123">#}
{#<input type="submit" onclick="a1()" value="提交">#}
{#</form>#}
{#html代码结束#} <script src="/static/js/jquery-1.12.4.min.js"></script>
<script>
function a1() {
$('.form_1').submit()
};
function a2(self) {
//DOM方式
console.log(self.contentWindow.document.body.innerText);
//jquery方式
console.log($(self).contents().find('body').html());
};
</script>
</body>
</html>
测试结果:(GET提交)
伪ajax 提交数据至后台(进阶方式,建议这种方式,不依赖jquery 兼容性高)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{#伪ajax请求 iframe + form DOM绑定方式 建议这种方式,不依赖jquery 兼容性高#}
<iframe id="p11" name='ifr' style="width: 100%;height:300px;display: block"></iframe>
<form id='f1' method="GET" action="/aj1.html" target="ifr">
<input type="text" class="in" name="p" value="123">
<button onclick="a1()">提交</button>
</form>
<script>
function a1() {
document.getElementById('p11').onload = a3;
document.getElementById('f1').submit()
};
function a3() {
console.log(this.contentWindow.document.body.innerText);
obj = JSON.parse(this.contentWindow.document.body.innerText);
console.log(obj);
console.log(typeof obj);
};
</script>
</body>
</html>
测试结果:(GET提交)
