Ajax
Ajax向后台发请求
1、下载引入jQuery
2、语法格式
# get
$.ajax({
Url: ‘http://www.*****.com’,
Type: ‘GET’,
Data: {‘k1’:’v1’},
Success: function(arg) {
// arg是字符串类型
// var obj = JSON.parse(arg)
}
})
$.ajax({
Url: ‘http://www.******.com’,
Type: ‘GET’,
Data: {‘k1’:’v1’},
dataType: ‘JSON’,
Success: function(arg) {
// arg是对象
}
})
# POST
$.ajax({
Url: “/add_classes.html”,
Type:”POST”,
Data:{},
Success:function(arg){
}
})
# *******
# data的value包含数组时，设置traditional = true
$.ajax({
Url: “/add_classes.html”,
Type:”POST”,
Data:{'key1':[1,2,3],},
traditional:true
Success:function(arg){
}
})
# data的value是字典时，需要将字典转为字符串
$.ajax({
Url: “/add_classes.html”,
Type:”GET”,
Data:{'key1':JSON.stringify({'k1':'v1',}),},
Success:function(arg){
}
})
3、例子
<body>
...
<a href="#" class="btn" onclick="AjaxSubmit1();">
点我
</a>
...
<script src="/static/jquery-3.1.1.js"></script>
<script>
function AjaxSubmit1() {
$.ajax({
url:'/ajax1.html',
type:'GET',
data:{'p':123},
success:function (arg) {
}
})
}
</script>
</body>
<body>
...
<a href="#" class="btn" onclick="AjaxSubmit2();">
点我
</a>
...
<script src="/static/jquery-3.1.1.js"></script>
<script>
function AjaxSubmit1() {
$.ajax({
url:'/ajax1.html',
type:'POST',
data:{'p':123},
success:function (arg) {
}
})
}
</script>
</body>
4、ajax原理XMLHttpRequest
function AjaxSubmit() {
var xhr = new XMLHttpRequest();
xhr.open('GET','/ajax1.html?p=123');
// send之前设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4){
// 接受完毕服务器返回的数据
console.log(xhr.responseText);
}
};
xhr.send(null); // 因为以GET的形式，所以可以不发送数据，只是在url上带参数
}
function AjaxSubmit() {
var xhr = new XMLHttpRequest();
// send之前设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4){
// 接受完毕服务器返回的数据
console.log(xhr.responseText);
}
};
xhr.open('POST','/ajax1.html');
// 设置请求头。POST的时候，只有设置请求头，django才会把数据从request.body中解析出来
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8');
xhr.send("p=456"); //
}
iFrame标签
1、iFrame在html中
<h6>学习iframe</h6>#}
<input type="text" placeholder="请输入URL" id="url"><a onclick="Test1();">查看</a>#}
<iframe id="iframe" src="http://www.autohome.com.cn" style="height: 800px;width: 600px;">
</iframe>
<script>
function Test1() {
var url =$('#url').val(); # 拿到input标签的值
$('#iframe').attr('src',url); # 将url设置给iframe的src
}
</script>
2、iFrame+Form表单：高仿ajax
<div>
<iframe id="iframe" name="ifra"></iframe>
<form id="fm" action="/ajax1.html" method="post" target="ifra">
<input type="text" name="root" value="1111"/>
<a href="#" onclick="AjaxSubmit();">提交</a>
</form>
</div>
<script src="/static/jquery-3.1.1.js"></script>
<script>
function AjaxSubmit() {
# iframe标签的onload：当iframe新加载内容时，调用
document.getElementById('iframe').onload = reloadIframe; // 这时不需传this 用这种方式的时候，在函数里this就是iframe
document.getElementById('fm').submit();
}
function reloadIframe() {
# iframe加载内容时，打印自身内容打印
console.log(this.contentWindow.document.body.innerHTML);
# 即在这里 this.contentWindow.document.body.innerHTML 就拿到iframe请求返回的数据
}
</script>
将form标签的target属性=iframe标签的name，当form提交数据时，就会由iframe来提交表单，并展示返回数据。
3、兼容性
相比于ajax、xmlHttpRequest，使用iframe 兼容浏览器最好。
JS笔记
Window.location.reload(); //js主动刷新页面
this.contentWindow.document.body.innerHTML; // 拿到iframe中的内容
$(iframe_element).contents().find('body').html(); // 也可以拿到iframe的内容
$(element).parent(); // element元素的父级
$(element).parent().remove(); // 移除元素