Django Ajax 补充

一. Ajax

- XMLHttpRequest(是jQuery调用浏览器模块)

- 原生Ajax

- jQuery

- ‘伪’Ajax（iFrame + Form）兼容性最好

- iframe标签

- form表单

原生Ajax简单代码示例：

get

function AjaxSubmit2() {
    var xhr = new XMLHttpRequest();
    // 回调函数
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            // 接受服务端返回的数据
            alert(xhr.responseText);
        }
    };
    // 请求链接
    xhr.open('GET', '/ajax1.html?p=123');
    // 什么都不发
    xhr.send(null)
}

post

注意：django中request.post中无法获取信息，是因为django必须要发送头部信息：

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

function AjaxSubmit4() {
    var xhr = new XMLHttpRequest();
    // 回调函数
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            // 接受服务端返回的数据
            alert(xhr.responseText);
        }
    };
    // 请求链接
    xhr.open('POST', '/ajax1.html');
    // 固定写法
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
    // 什么都不发
    xhr.send('p=456')
}
jquery——Ajax代码示例：

function AjaxSubmit1() {
    $.ajax({
        url: '/ajax1.html',        type: 'GET',        data: {'p': 123},        success: function (arg) {
            console.log(arg)
        }
    })
}

伪Ajax代码：

伪Ajax利用HTML标签的iframe标签具有局部加载内容的特性，所以可以使用其来伪造Ajax请求。

使用ifram框架时注意点：

iframe的name值必须和form中target的值一样，否者功能无法实现

伪Ajax请求代码示例

--------------------------------index.html-------------------------------------------

<body>
<div>
        <h6>iframe 学习</h6>
        <div>
            <input id="url" type="text" placeholder="请输入网址" value="">
            <a onclick="Test1()">查看</a>
        </div>
        <iframe id="iframe" style="width: 500px;height: 100px;" src="http://www.chenxm.cc/"></iframe>
        
        
        <h6>基于iframe form表单</h6>
        <iframe id="idframe" name="ifra"></iframe>
        <form action="/ajax1.html" method="POST" target="ifra">
            <input name="root" value="11111111">
            <input type="submit" value="提交">
        </form>
    </div>
</div>
</body>
<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    function Test1(){
        var url = $('#url').val();
        console.log(url);
        $('#iframe').attr('src',url)
    }
</script>

伪Ajax获取结果代码示例

--------------------------------index.html-------------------------------------------

<body>
<div>
    <h6>iframe 学习</h6>
    <div>
        <input id="url" type="text" placeholder="请输入网址" value="">
        <a onclick="Test1()">查看</a>
    </div>
    <iframe id="iframe" style="width: 500px;height: 100px;" src="http://www.chenxm.cc/"></iframe>
    <h6>基于iframe form表单</h6>
    <iframe id="idframe" name="ifra" onload="reloadIframe(this)"></iframe>
    <form id='fm' action="/ajax1.html" method="POST" target="ifra">
        <input name="root" value="11111111">
        <a onclick="AjaxSubmit5()">提交</a>
    </form>
</div>
</body>

<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    function Test1(){
        var url = $('#url').val();
        console.log(url);
        $('#iframe').attr('src',url)
    }
    function AjaxSubmit5() {

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

    function reloadIframe(ths) {
        // js写法
        var content = ths.contentWindow.document.body.innerHTML;
        alert(content);
        // jQuery 写法
{#        var content = $(ths).content().find('body').html();#}
{#        console.log(content)#}
    }
</script>

该方法获取Ajax返回值会报错误，原因是因为html从上到下运行时，找不到reloadIframe()。

终结伪ajax方法：

--------------------------------index.html-------------------------------------------

<body>
<div>
    <h6>iframe 学习</h6>
    <div>
        <input id="url" type="text" placeholder="请输入网址" value="">
        <a onclick="Test1()">查看</a>
    </div>
    <iframe id="iframe" style="width: 500px;height: 100px;" src="http://www.chenxm.cc/"></iframe>
    <h6>基于iframe form表单</h6>
    <iframe id="idframe" name="ifra"></iframe>
    <form id='fm' action="/ajax1.html" method="POST" target="ifra">
        <input name="root" value="11111111">
        <a onclick="AjaxSubmit5()">提交</a>
    </form>
</div>
</body>

<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    function Test1(){
        var url = $('#url').val();
        alert(content);
        $('#iframe').attr('src',url)
    }
function AjaxSubmit5() {
    document.getElementById('iframe').onload=reloadIframe
    document.getElementById('fm').submit()
}

function reloadIframe() {
    // js写法
    var content = this.contentWindow.document.body.innerHTML;
    alert(content);
    // jQuery 写法
    //var content = this.content().find('body').html();
    //console.log(content)
}
</script>

二. Ajax上传文件

- jQuery

- 原生Ajax

以上两种方式可利用formData对象(如果考虑低版本IE用户，建议使用iFrame+Form)

- iFrame + Form（兼容性最好）

juqery上传文件方法：

原生Ajax

iFrame+Form

Django Ajax 补充

猜你在找的Django相关文章