Ajax

最新推荐文章于 2022-05-09 09:51:40 发布
最新推荐文章于 2022-05-09 09:51:40 发布
阅读量154 收藏
点赞数
分类专栏： pythonWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wudiyunxing/article/details/80524236
版权



一。

.py

from django.shortcuts import render,HttpResponse

# Create your views here.
def index(request):
    return render(request,'index.html')

def ajax(request):
    import json
    print(request.POST)
    print(request.body)
    result={'status':True,'message':'lalalal'}
    return HttpResponse(json.dumps(result))


.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.3.1.js"></script>
</head>
<body>
<h1>Ajax全套</h1>
<h3>jequery ajax</h3>
<input type="button" value="jequery ajax" id="btn1"><br/>

<h3>原生 ajax</h3>
<input type="button" value="原生 ajax" id="btn2"><br/>

<h3>Iframe+form表单实现伪Ajax</h3>
<iframe id="iframe01" method='post' name="ifram"></iframe>
<form action="/ajax3/" target="ifram" id="form01">
    <input type="text" name="root" value="111">
    <input type="button" value="伪Ajax" id="btn3">
</form>
</body>
</html>
<script>
    $('#btn1').click(function () {
        $.ajax({
            url: '/ajax1/',
            type: 'POST',
            data: {'data': 'hello'},
            success: function (arg) {
                console.log(arg)
            }
        });
    });

    document.getElementById('btn2').οnclick=function () {
        var xlh = new XMLHttpRequest();
        xlh.onreadystatechange = function () {
            if (xlh.readyState == 4) {
                //接收完毕服务器返回的数据
                console.log(xlh.responseText);
            }
        };
        xlh.open('POST', '/ajax2/');
        xlh.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');//GET请求不需要加
        xlh.send('p=123');
    };


    document.getElementById('btn3').onclick = function () {
        document.getElementById('form01').submit();
        document.getElementById('iframe01').onload = function () {
            var str = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(str);
            if (obj.status) {
                alert(obj.message)
            }

        }
    }
</script>

二。Ajax上传

.py

from django.shortcuts import render,HttpResponse

# Create your views here.
def index(request):
    return render(request,'index.html')

def ajax(request):
    import json
    print(request.GET)
    print(request.POST)
    print(request.FILES)
    result={'status':True,'message':'lalalal'}
    return HttpResponse(json.dumps(result))

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.3.1.js"></script>
</head>
<body>
<h1>Ajax全套</h1>
<div>
    <h3>1.jequery ajax</h3>
    <input type="button" value="jequery ajax" id="btn1">
</div>
<div>
    <h3>2.原生 ajax</h3>
    <input type="button" value="原生 ajax" id="btn2">
</div>
<div>
    <h3>3.Iframe+form表单实现伪Ajax</h3>
    <iframe id="iframe01" name="ifram"></iframe>
    <form action="/ajax3/" target="ifram" id="form01">
        <input type="text" name="root" value="111">
        <input type="button" value="伪Ajax" id="btn3">
    </form>
</div>
<div>
    <h3>4.Ajax文件上传</h3>
    <input type="file" id="img">
    <input type="button" value="4.1ajax上传文件" id="btn4">
    <input type="button" value="4.2原生ajax上传文件" id="btn5">
</div>
<div>
    <h3>4.3Iframe+form表单实现伪Ajax上传文件</h3>
    <iframe id="iframe02" name="ifram02" style="display: none;"></iframe>
    <form action="/ajax6/" target="ifram02" id="form02" enctype="multipart/form-data" method="post">
        <input type="text" name="k1" value="v1">
        <input type="file" name="k2" >
        <input type="button" value="4.3Iframe+form表单实现伪Ajax上传文件" id="btn6">
    </form>
</div>
</body>
</html>
<script>
    //1.jequery ajax
    $('#btn1').click(function () {
        $.ajax({
            url: '/ajax1/',
            type: 'POST',
            data: {'data': 'hello'},
            success: function (arg) {
                console.log(arg)
            }
        });
    });
    //2.原生 ajax
    document.getElementById('btn2').onclick = function () {
        var xlh = new XMLHttpRequest();
        xlh.onreadystatechange = function () {
            if (xlh.readyState == 4) {
                //接收完毕服务器返回的数据
                console.log(xlh.responseText);
            }
        };
        xlh.open('POST', '/ajax2/');
        xlh.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');//GET请求不需要加
        xlh.send('p=123');
    };
    //3.Iframe+form表单实现伪Ajax
    document.getElementById('btn3').onclick = function () {
        document.getElementById('form01').submit();
        document.getElementById('iframe01').onload = function () {
            var str = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(str);
            if (obj.status) {
                alert(obj.message)
            }

        }
    };

    //1. ajax上传文件
    $('#btn4').click(function () {
        var data = new FormData();//FormData可以包裹数据；数据可以是文件
        data.append('k1', 'v1');
        var file01 = document.getElementById('img').files[0];
        data.append('k2', file01);

        $.ajax({
            url: '/ajax4/',
            type: 'POST',
            data: data,
            success: function (arg) {
                console.log(arg)
            },
            contentType: false,
            processData: false
        })
    });
    //2.原生ajax上传文件
    document.getElementById('btn5').onclick = function () {
         var data = new FormData();
        data.append('k1', 'v1');
        var file01 = document.getElementById('img').files[0];
         data.append('k2', file01);

        var xlh = new XMLHttpRequest();
        xlh.onreadystatechange = function () {
            if (xlh.readyState == 4) {
                //接收完毕服务器返回的数据
                console.log(xlh.responseText);
            }
        };
        xlh.open('POST', '/ajax5/');
        xlh.send(data);
    };
    //3.Iframe+form表单实现伪Ajax上传文件
    document.getElementById('btn6').onclick = function () {
        document.getElementById('form02').submit();
        document.getElementById('iframe02').onload = function () {
            var str = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(str);
            if (obj.status) {
                alert(obj.message)
            }

        }
    };
</script>

模仿抽屉做图片上传（Iframe+form表单实现伪Ajax上传文件）

.py

from django.shortcuts import render,HttpResponse

# Create your views here.


def uploadFile(request):
    import json
    import os
    if request.method=='GET':
        return render(request,'index2.html')
    if request.method=='POST':
        result = {'status': True, 'data': None}
        req=request.FILES.get('k2')
        file_path=os.path.join('static',req.name)
        f=open(file_path,'wb')
        for i in req.chunks():
            f.write(i)
        f.close()
        result['data']=file_path
        return HttpResponse(json.dumps(result))

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.3.1.js"></script>
</head>
<body>
<div>
    <h3>4.3Iframe+form表单实现伪Ajax上传文件(模拟抽屉)</h3>
    <iframe id="iframe02" name="ifram02" style="display: none;"></iframe>
    <form action="/uploadFile/" target="ifram02" id="form02" enctype="multipart/form-data" method="post">
        <input type="file" name="k2" οnchange="uploadFile();" >
    </form>
</div>
<div id="preview">

</div>
</body>
</html>

<script>

   function uploadFile() {
        document.getElementById('form02').submit();
        document.getElementById('iframe02').onload = function () {
            var str = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(str);
            if (obj.status) {
                var img=document.createElement('img');
                console.log(obj.data);
                img.src='/'+obj.data;//没搞懂为什么加‘/’,视频里没有加

                $('#preview').empty().append(img);
            }
        }
    };
</script>



.py

def jsonp(request):
    return render(request,'jsonp.html')

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script src="/static/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" value="发送" οnclick="jsonp();">
</body>
</html>
<script>
    function jsonp() {
        $.ajax({
            url:'http://www.jxntv.cn/data/jmd-jxtv2.html',
            type:'GET',//只能发GET，写POST无效
            dataType:'jsonp',
            jsonp:'callback',
            jsonpCallback:'list'//期待返回包裹的函数名字符串为list，可以任意该，但有的网站不专业，给写死了

        })
    }
    function list(arg) {
        console.log(arg)
    }
</script>





























































wudiyunxing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAXCALL
10-31
AJAXCALL
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
富文本
weixin_43392328的博客
03-20 218
富文本 复制内容去掉样式 config配置 //粘贴只保留标签，去除标签所有属性 ,retainOnlyLabelPasted: true ,pasteplain:true //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴 //纯文本粘贴模式下的过滤规则 ,'filterTxtRules' : function(){...
解决window.document.body.innerHTML替换导致事件丢失问题
m0_58257035的博客
05-09 3244
关于window.document.body.innerHTML事件失效
JavaScript 实现打印操作
weixin_38168139的博客
08-30 1155
一.打印当前页面指定元素中的内容 方式一：直接使用window.print(); （1）首先获得元素的html内容（这里建议如果有样式最好是用内联样式的方式） var newstr = document.getElementById(myDiv).innerHTML;//得到需要打印的元素HTML （2）保存当前页面的整个html，因为window.print()打印操作是打...
发送不同ajax请求以及iframe
banjiaobian1922的博客
09-10 131
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head> <style> .btn{ display: inline-b...
web端文件上传功能的思考
01-03 217
概述 文件上传是一个很常见的需求，实现文件上传的技术也很多。下面就谈谈一些常见的上传技术以及它们的优劣。 传统表单上传 传统表单文件上传估计是运用最广泛和最简单的技术了，说它简单是因为只要指定表单的enctype为multipart/form-data，就行了。简单可靠所以被运用的广泛。传统表单上传示例如下所示： 表单中的action参数指的是后台处理上
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
伪ajax请求,JavaScript 伪Ajax请求
weixin_30336701的博客
08-06 222
伪Ajax通过iframe以及form表单，可以实现伪Ajax的方式。并且它的兼容性是最好的。iframeiframe标签能够获取一个其他页面的文档内容，这说明它内部肯定是发送了一个请求，并且收到后端的数据展示在页面上。基于这一点，我们可以让他与form表单做一个结合使用。结合使用首先form表单中有一个target属性，我们需要为iframe取一个名字。并且让target属性与iframe做绑定...
让 umeditor 支持跨域上传图片
weixin_30478757的博客
07-04 106
事实上，umeditor 上传图片采用的是 form+隐藏iframe方式，已经能做到无刷新跨域上传。但小小遗憾的是做的并不完美，上传图片后，反馈的json信息，js并不能读取。原因在于，js不能操作跨域的iframe。 1 var r = this.contentWindow.document.body.innerHTML; 此句代码在FF Chrome上都会报错。浏览器的这种限制，可以...
各浏览器Iframe对contentWindow、contentDocument、document及frames属性测试
jievachange
04-25 2008
转自：http://blog.163.com/codewin@126/blog/static/173669443201231152319351/  Iframe易于嵌套及管理页面，但经常遇到跨域、父子页面访问问题，对于子页面访问父页面可以兼容性地通过window.Top或window.Parent或window.frameElement等操作，但对于标题中四个对象，一直没有完整测试过，故买个
javascript基础教程第8版---第5章窗口与框架---学习笔记
bit_7的专栏
10-11 723
iframe是一种内联框架,可以嵌入到常规HTML页面中的框架,并非必须置于框架集之内,与一般框架一样,iframe可以是一份独立的html文档,可将iframe作为一般脚本的目标,这样可以在脚本控制下,实时创建内容并脱离框架集将其显示在页面中.用js加载iframesrc iframe页面的url id js 可以使用这个属性引用iframe name
js调用html打印,js调用页面打印功能后，由于替换了body.innerHTML,再点击就不能再打印了，如下图和代码...
weixin_33335851的博客
06-04 419
问题1.点击打印前，我要上下拉伸这个textarea的高度，2.拉伸后，点击打印，如果取消，则返回到页面，并保持我拉伸后的textarea高度，现在取消后，不能再点击打印，调出打印预览了3.不用sessionlocatorep,cookie这些3.页面不管刷不刷新，实现效果就好，我下面的刷新是为了可以后续可以再点击代码Document#box {width: 300px;height: 200px...
AJAX技术入门讲解
"AJAX技术入门.ppt - 传智播客的AJAX教程，涵盖了AJAX的基本概念、思维方式、核心技术、应用实例、优缺点以及开发工具。" 在讲解AJAX技术之前，首先需要理解它的全称：Asynchronous JavaScript and XML（异步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值