Django框架学习笔记（27.Ajax简单操作）

最新推荐文章于 2022-07-27 01:00:00 发布

__XYQ

最新推荐文章于 2022-07-27 01:00:00 发布

阅读量299

点赞数

分类专栏： Django框架文章标签： django 前端

本文链接：https://blog.csdn.net/qq_41144008/article/details/78879127

版权

Django框架专栏收录该内容

29 篇文章 1 订阅

订阅专栏

原生Ajax:

urls.py:

url(r'^ajax/$', views.ajax),
url(r'^ajax_json/$', views.ajax_json),

views.py:

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

def ajax_json(request):
    ret = {
        'status': True,
        'data': None,
    }
    import json
    return HttpResponse(json.dumps(ret))

ajax.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text"/>
<input type="button" value="Ajax1" οnclick="Ajax1();"/>

<script>
    function Ajax1(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/ajax_json/', true);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                //4表示接收完毕
                var obj = JSON.parse(xhr.responseText);
                console.log(obj);
            }
        };
        xhr.setRequestHeader('k1', 'v1');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        xhr.send('name=root;pwd=123');
    }
</script>
</body>
</html>

伪ajax:

先了解下iframe标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="url"/><input type="button" value="发送iframe请求" οnclick="iframeRequest();"/>
<iframe id="ifm" src="http://www.baidu.com"></iframe>
<script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
<script>
    function iframeRequest(){
        var url = $('#url').val();
        $('#ifm').attr('src', url);
    }

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

利用iframe的特性伪造ajax：

<form action="/ajax_json/" method="POST" target="ifm1">
    {% csrf_token %}
    <iframe name="ifm1"></iframe>
    <input type="text" name="username"/>
    <input type="text" name="email"/>
    <input type="submit" value="提交"/>
</form>

获取内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/ajax_json/" method="POST" target="ifm1">
    {% csrf_token %}
    <iframe id="ifm1" name="ifm1"></iframe>
    <input type="text" name="username"/>
    <input type="text" name="email"/>
    <input type="submit" value="提交" οnclick="submitForm();"/>
</form>
<script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
<script>
    function submitForm(){
        $('#ifm1').load(function(){
            var text = $('#ifm1').contents().find('body').text();
            var obj = JSON.parse(text);
            console.log(obj)
        })
    }
</script>
</body>
</html>

__XYQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Django框架学习笔记（27.Ajax简单操作）

原生Ajax:urls.py:url(r'^ajax/$', views.ajax),url(r'^ajax_json/$', views.ajax_json),views.py:def ajax(request): return render(request, 'ajax.html')def ajax_json(request): ret
复制链接

扫一扫

专栏目录