十九、Ajax和iFrame
1.一、计算机初识2.二、数据概述3.六、ip地址与子网划分4.五、网络通信实现5.四、字符编码6.三、网络基础7.十四、MySQL与Django之Model基础8.十三、Django Admin9.十二、Django视图函数和模版相关10.十一、Django url控制系统11.十、Django静态文件12.九、Django环境搭建（基于anaconda环境）13.八、Python开发环境管理14.七、ip地址配置15.二十五、JSON跨域16.二十四、文件上传17.二十三、Django Serializes18.二十二、Django之Form组件19.二十一、分页20.JS笔记21.二十、基于Bootstrap和FontAwesome制作页面
22.十九、Ajax和iFrame
23.十八、Django之Http24.十七、Cookie和Session25.十六、Django的ORM（二）26.十五、Django的ORM27.实践中前端的一些笔记28.二十六、登录相关29.二十九、RBAC+动态菜单30.二十八、XSS31.JS第三方插件32.二十七、简单的验证码实现33.三十二、Django实践的笔记34.三十一、动态Form35.三十、KingadminAjax
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(); // 移除元素
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库