僞Ajax,非XMLHttpRequest

  • 僞Ajax,非XMLHttpRequest,iframe標籤

# iframe標籤,不刷新發送Http請求
# view.py
def autohome(request):
    if request.method == 'GET':
        return render(request,'autohome.html')

# autohome.html

<body>
<div>
    <input type="text" id="text1">
    <input type="button" value="提交" onclick="changeSrc()">
</div>
<iframe id="text2" style="width: 1000px;height: 2000px" src="http://www.autohome.com.cn"></iframe>

</body>
<script src="/static/jquery-3.2.1.js"></script>
<script>
    function changeSrc() {
        /*
        var cont = $('#text1').val();
        $('#text2').attr('src',cont);
        */
        var cont = document.getElementById('text1').value;
        document.getElementById('text2').src = cont
    }
</script>


# iframe + form 進行僞Ajax

# views.py
def fake_ajax(request):
    if request.method == 'GET':
        return render(request,'fake_ajax.html')
    else:
        print('post.ok')
        print(request.POST.get('user'))
        return HttpResponse('ok')

# fake_ajax.html

<body>
<input type="text">
<form id="f1" action="/fake_ajax/" target="ifr" method="post">
    <iframe id="ifr" name="ifr" style="display: none"></iframe>
    <input type="text" name="user" />
    <input type="submit" />
</form>
</body>

# 加上僞造的'回調函數'

# views.py
def fake_ajax(request):
    if request.method == 'GET':
        return render(request,'fake_ajax.html')
    else:
        print('post.ok')
        content = request.POST.get('user')
        return HttpResponse(content)


# fake_ajax.html   
<body>
<input type="text">
<form id="f1" action="/fake_ajax/" target="ifr" method="post">
    <iframe id="ifr" name="ifr" style="display: none"></iframe>
    <input type="text" name="user" />
    <a onclick="submitForm()">提交</a>
</form>

<script>
    function submitForm() {
        document.getElementById('ifr').onload = loadIframe;
        document.getElementById('f1').submit();

    }
    function loadIframe() {
        var content =  document.getElementById('ifr').contentWindow.document.body.innerText;
        alert(content)
    }
</script>
</body>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章