2018-10-04-Python全栈开发-day62.Iframe，Formdata，Ajax

多种方式实现ajax效果

1.不依赖jquery，使用XMLHttprequest

　　

<div>
    <a onclick="func1()">dianwo</a>
    <a class="btn" onclick="func1();">点我</a>
</div>
<script>
    function func1() {
        var xml1=new XMLHttpRequest();
        xml1.onreadystatechange=function(){
            if(xml1.readyState==4)
            {console.log(xml1.responseText)}
        };
        xml1.open('GET','/xml/');

        xml1.send('hello')
    }

</script>
def index(request):

    return render(request,'index.html')
def xml(request):
    return HttpResponse('hello')

　　使用post方式上传数据

　　因为xml上传只有请求体，没有请求头，所以需要自己加上一个请求头，django才能识别所提交的数据

　　

xml1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');

在xml1.send之前加上求情头设置

2.使用iframe伪造ajax请求

　使用iframe和form标签进行结合，可以伪造ajax请求，并且这种方式的兼容性最高

　　

　　

from django.shortcuts import render,HttpResponse

# Create your views here.


def index(request):
    if request.method=='POST':
        ret = {'status': True, 'message': '....'}
        import json
        return HttpResponse('hello')
    return render(request,'index.html')
views
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>

        <h6>基于Iframe+Form表单</h6>
        <iframe id="iframe" name="ifra"></iframe>
        <form id="fm" action="/index" method="POST" target="ifra">
            {% csrf_token %}
            <input name="root" value="111111" />
            <a onclick="AjaxSubmit5()">提交</a>
        </form>

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

<script>
    function AjaxSubmit5() {
            document.getElementById('iframe').onload = reloadIframe;
            document.getElementById('fm').submit();
        }

function reloadIframe() {
            // this=当前标签
            //console.log(ths);
            //console.log(ths.contentWindow);
            //console.log(ths.contentWindow.document.body.innerHTML);
            //console.log($(ths).contents().find('body').html());
            var content = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(content);
            if(obj.status){
                alert(obj.message);
            }
        }
</script>
html

 

　　

posted @ 2018-10-04 17:04  brownbearye  阅读(126)  评论(0)    收藏  举报