python47-ajax三种形式、iframe上传以及jsonp

像我这样的人111
219 阅读3分钟

1.urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('ajax1/', views.ajax1),
    path('upload/', views.upload),
    path('upload_img/', views.upload_img),
    path('jsonp/', views.jsonp),
    path('ajax3/', views.ajax3),
]

2.views.py

from django.shortcuts import render,HttpResponse
import json
# Create your views here.
def index(req):
    return render(req,'index.html')
def ajax1(req):

    print(req.GET)
    print(req.POST)
    print(req.FILES)
    # print(req.body)
    ret={'status':True,'message':'.......'}

    return HttpResponse(json.dumps(ret))
def upload(req):
    return render(req,'upload.html')

def upload_img(req):
    import os
    import uuid
    nid =str(uuid.uuid4())
    ret = {'status':True,'data':None,'message':None}
    obj=req.FILES.get('k3')
    file_path=os.path.join('static',nid+obj.name)

    f=open(file_path,'wb')
    for line in obj.chunks():
        f.write(line)
    f.close()

    ret['data']=file_path
    print(file_path)
    return HttpResponse(json.dumps(ret))
def jsonp(req):
    return render(req,'jsonp.html')
def ajax3(req):
    return HttpResponse('本服务器发送的请求')

3.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .btn{
            display: inline-block;
            padding: 5px 10px;
            background-color: coral;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Ajax全套</h1>
    <h3>AjaxGet请求</h3>
    <div>
        <a class="btn" onclick="AjaxSubmit1();">点我</a>
        <a class="btn" onclick="AjaxSubmit2();">点我</a>
    </div>
    <h3>AjaxPost请求</h3>
    <div>
        <a class="btn" onclick="AjaxSubmit3();">点我</a>
        <a class="btn" onclick="AjaxSubmit4();">点我</a>
    </div>
    <h3>文件上传</h3>
    <input type="file" id="img">
    <a class="btn" onclick="AjaxSubmit6();">上传</a>
    <a class="btn" onclick="AjaxSubmit7();">上传</a>

    <h3>'伪'Ajax请求</h3>
    <div>
        <h6>学习iframe</h6>
        <div>
            <input type="text" id="url" placeholder="请输入URL"><a onclick="Test1();">查看</a>
        </div>
        <iframe id="iframe" style="height: 800px;width: 600px" src="http://www.autohome.com.cn"></iframe>
        <h6>给予iframe+Form表单</h6>

        <iframe id="iframe1111" name="ifra" ></iframe>
        <form id="fm" action="/ajax1/" method="post" target="ifra">
            <input type="text" name="root" value="111">
            <a onclick="AjaxSubmit5();">提交</a>
        </form>
    </div>
{#    文件上传#}
     <iframe style="display: none" id="iframe1" name="ifra1" ></iframe>
     <form id="fm1" action="/ajax1/" method="post" target="ifra1" enctype="multipart/form-data">
         <input type="text" name="k1">
         <input type="text" name="k2">
         <input type="file" name="k3">
         <a onclick="AjaxSubmit8();">提交</a>
     </form>
<script src="/static/js/jquery-3.1.1.js"></script>
    <script>

        function Test1() {
           var url =$('#url').val();
           $("#iframe").attr('src',url);
        }
        function AjaxSubmit1() {
            $.ajax({
                url:'/ajax1/',
                type:"GET",
                data:{'p':123},
                success:function (arg) {
                    console.log(arg);
                }
            })

        }
        function AjaxSubmit2() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function (ev) {
                if(xhr.readyState==4){
                    console.log(xhr.responseText);
                    console.log(ev)
                }
            };
            xhr.open('GET','/ajax1?p=123');
            xhr.send(null);
        }
        function AjaxSubmit3() {
            $.ajax({
                url:'/ajax1/',
                type:"POST",
                data:{'p':123},
                success:function (arg) {
                    console.log(arg);
                }
            })

        }
        function AjaxSubmit4() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function (ev) {
                if(xhr.readyState==4){
                    console.log(xhr.responseText);
                    console.log(ev)
                }
            };
            xhr.open('POST','/ajax1/');
            //设置请求头
            xhr.setRequestHeader('Content-Type','application-x-www.form-urlencoded; charset-UTF-8')
            xhr.send("p=456");
        }
        function AjaxSubmit5() {
            //在提交之前给iframe绑定onload方法
            //如果以这种方式进行绑定事件
            document.getElementById('iframe1111').onload=reloadIframe

            document.getElementById('fm').submit();

        }
        //此时的this就是指当前标签
        function reloadIframe() {
            console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',this)
            console.log(this.contentWindow.document.body.innerHTML);
            console.log($(this).contents().find('body').html());

            var content = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(content);
            if (obj.status){
                alert(obj.message);
            }
        }

        function AjaxSubmit6() {
            //获取文件中的内容
            //document.getElementById('img').files[0];
            var data=new FormData();
            data.append('k1','v1');
            data.append('k2','v2');
            data.append('k3',document.getElementById('img').files[0]);
            $.ajax({
                url:'/ajax1/',
                type:'POST',
                data:data,
                success:function (arg) {
                    console.log(arg);
                },
                processData:false,
                contentType:false
            })
        }
        function AjaxSubmit7() {
            //可以封装文件
            var data=new FormData();
            data.append('k1','v1');
            data.append('k2','v2');

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function (ev) {
                if(xhr.readyState==4){
                    console.log(xhr.responseText);
                    console.log(ev)
                }
            };
            xhr.open('POST','/ajax1/');
            xhr.send(data);
        }
        function AjaxSubmit8() {
            document.getElementById('iframe1').onload=reloadIframe1;
            document.getElementById('fm1').submit();
        }
        function reloadIframe1() {
            var content = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(content);
            console.log(obj)
        }

    </script>
</body>
</html>

4.upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .btn{
            display: inline-block;
            padding: 5px 10px;
            background-color: coral;
            color: white;
        }
    </style>
</head>
<body>
{#    文件上传#}
     <iframe style="display: none" id="iframe1" name="ifra1" ></iframe>
     <form id="fm1" action="/upload_img/" method="post" target="ifra1" enctype="multipart/form-data">
         <input type="file" name="k3" onchange="uploadFile();">
     </form>
    <h3>预览</h3>
    <div id="preview">
    </div>
<script src="/static/js/jquery-3.1.1.js"></script>
    <script>
        function uploadFile() {
            document.getElementById('iframe1').onload=reloadIframe1;
            document.getElementById('fm1').submit();
        }
        function reloadIframe1() {
            var content = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(content);
            console.log(obj.data)
            var tag=document.createElement('img');
            tag.src=obj.data;
            $('#preview').empty().append(tag);
        }

    </script>
</body>
</html>

5.jsonp.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp</title>
</head>
<body>
    <div id="content"></div>
    <input type="button" value="发送1" onclick="submitJsonp1();">
    <input type="button" value="发送2" onclick="submitJsonp2();">
    <input type="button" value="发送3" onclick="submitJsonp3();">
    <input type="button" value="发送4" onclick="submitJsonp4();">
    <script src="/static/js/jquery-3.1.1.js"></script>
    <script>
        function submitJsonp1() {
            $.ajax({
                url:'/ajax3/',
                type:'GET',
                data:{nid:2},
            success:function (arg) {
                $("#content").html(arg);
            }
            })
        }
        function submitJsonp2() {
            var tag = document.createElement('script');
            tag.src='http://127.0.0.1:9000/xiaokai/';
            document.appendChild(tag);
            document.removeChild(tag);
            /*
                $.ajax({
                url:'http://127.0.0.1:9000/xiaokai',
                type:'GET',
                data:{nid:2},
            success:function (arg) {
                $("#content").html(arg);
            }
            })
             */


        }
        //jsonp格式
        function list(arg) {
            $('#content').html(arg);
        }
        //jsonp只能发送GET请求 callback=list
        function submitJsonp4() {
            $.ajax({
                url:'http://127.0.0.1:9000/xiaokai/',
                type:'GET',
                dataType:'jsonp',
                jsonp:'callback',
                jsonpCallback:'list'
            })
        }
        /*
        JSONP:
            利用创建script块，在其中执行src属性为:远程url
            函数(返回值)
            function 函数(arg){

            }
         */
    </script>
</body>
</html>

avatar
文章
阅读
粉丝