ajax 補充

jquery 中封裝了ajax哭当，使得我們可以十分便捷的使用ajax低千，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>ajax</h1>
<a class="btn btn-info" onclick="AjaxSubmin1()">Jquery-點我</a>

<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function AjaxSubmin1() {
        $.ajax({
            url: '/ajax.html',
            type: "get",
            data: {'a':1},
            success:function (arg) {
                console.log(arg);
            }
        })
    };
</script>
</body>
</html>

而原生的ajax配阵，也必須要學會使用馏颂，對吧，棋傍，下面這個是ajax發(fā)送get請求救拉，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>ajax</h1>
<a class="btn btn-primary" onclick="AjaxSubmin2()">原生ajax-點我</a>

    function AjaxSubmin2() {
        var xhr = new XMLHttpRequest(); // new 為建立一個對象
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){ // 檢測狀態(tài)，如果為4瘫拣，就意味著接收完畢服務器返回的數(shù)據(jù)
                console.log(xhr.responseText)
            }
        };
        xhr.open('get','/ajax.html?a=1'); // 在這里我們只能手動添加數(shù)據(jù)的路徑
        xhr.send(null);
    }

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

jquery ajax 的 post 發(fā)送數(shù)據(jù)

    function AjaxSubmin1() {
        $.ajax({
            url: '/ajax.html/',  // 這里相對于get方式路徑后需要多加一個 / 
            type: "post",
            data: {'a':1},
            success:function (arg) {
                console.log(arg);
            }
        })
    };

原生 ajax 的 post 方式

    function AjaxSubmin2() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){
                console.log(xhr.responseText)
            }
        };
        xhr.open('post','/ajax.html/'); // 這里的路徑后也必須添加一個 /
        // 這里必須添加一個請求頭亿絮，要不然django識別不出請求頭就不會去請求體中提取數(shù)據(jù)，
        // 也就是說不添加請求頭數(shù)據(jù)也是可以發(fā)送過去的麸拄，只是django不能識別派昧，發(fā)送的數(shù)據(jù)放在 request.body 中
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        xhr.send("a=1");
    }

iframe 挺有意思的，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>ajax</h1>

<div>
    <input id="url" type="text" placeholder="請輸入URL"><a onclick="test1()">查看</a>
</div>
<iframe id="iframe" src="http://www.baidu.com" frameborder="0" style="width: 600px;height: 800px;"></iframe>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test1() {
        url = $("#url").val();
        $("#iframe").attr("src",url);
    }
</script>
</body>
</html>

iframe 可以嵌套兩層拢切，之后就不行了蒂萎。

iframe 和 form 表單可以構成偽ajax，(利用 iframe 的頁面不刷新特性淮椰，和 form 提交數(shù)據(jù)的功能)五慈，target 和 name 是關鍵點。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>偽ajax</h1>
<form action="/ajax.html/" method="post" id="fm" target="iframe">
    <input type="text" value="libai" name="user">
    <a onclick="test()">提交</a>
</form>
<iframe name="iframe"></iframe>

<script>
    function test() {
        document.getElementById("fm").submit();
    }
</script>
</body>
</html>

form 提交后返回的數(shù)據(jù)會顯示在 iframe 中主穗，這種方式是兼容性最好的泻拦，很多網(wǎng)站上傳文件都是通過這種方式做的，iframe 歷史悠久忽媒，所以很多瀏覽器都支持争拐，效果也好

利用 iframe 和 form 表單提交，我們要如何去取得 iframe 中的數(shù)據(jù)呢晦雨，什么時候去取呢架曹，在 iframe 接收到數(shù)據(jù)，也就是 iframe 加載的時候去取就行了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>偽ajax</h1>
<form action="/ajax.html/" method="post" id="fm" target="iframe">
    <input type="text" value="libai" name="user">
    <a onclick="test()">提交</a>
</form>
<iframe name="iframe" onload="onloadtest(this)" id="ifr"></iframe>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test() {
        document.getElementById("fm").submit();
    }
    function onloadtest(that) {
        console.log(that.contentWindow.document.body.innerHTML);  // js 取得數(shù)據(jù)
        console.log($(that).contents().find('body').html()); // jquery 取得iframe數(shù)據(jù)
    }
</script>
</body>
</html>
# 這個方法會報錯金赦，在第一次加載頁面時音瓷，會提示 onloadtest（）方法找不到，因為整個html都是
# 從上到下加載的夹抗，自然而然就找不到了绳慎，我們可以用另外綁定函數(shù)的方式來解決
# 要十分注意是如何傳遞 this 參數(shù)的

用綁定函數(shù)的方式，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>偽ajax</h1>
<form action="/ajax.html/" method="post" id="fm" target="iframe">
    <input type="text" value="libai" name="user">
    <a onclick="test()">提交</a>
</form>
<iframe name="iframe" id="ifr"></iframe>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test() {
        document.getElementById(("ifr")).onload = onloadtest; // 按下按鈕時為iframe綁定
        document.getElementById("fm").submit(); 
    }
    function onloadtest() {
        console.log(this.contentWindow.document.body.innerHTML);
        console.log($(this).contents().find('body').html());
    }
</script>
</body>
</html>

iframe 和 form 的偽 ajax 提交方式漠烧，post 和 get 只需要修改 form 中的 type 就行了杏愤，其他的都一樣。

ajax 和 js 上傳文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>文件上傳</h1>
<input type="file" id="img">
<a onclick="test1()" class="btn btn-primary">jquery 上傳</a>
<a onclick="test2()" class="btn btn-danger">js 上傳</a>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test1() {
        var data = new FormData();
        data.append('k1','v1');
        data.append('k2','v2');
        data.append('k3',document.getElementById(("img")).files[0]);
        $.ajax({
            url: "/ajax.html/",
            type: "POST",
            data: data,
            processData: false,  // tell jQuery not to process the data
            contentType: false,  // tell jQuery not to set contentType
            success:function (arg) {
                console.log(arg);
            }
        })
    }
    function test2() {
        var data = new FormData();
        data.append('k1','v1');
        data.append('k2','v2');
        data.append('k3',document.getElementById(("img")).files[0]);
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if(xhr.readyState==4){
                // 接收完畢服務器返回的數(shù)據(jù)
                console.log(xhr.responseText)
            }
        };
        xhr.open("POST","/ajax.html/");  // 這里不用再設置 setHeader
        xhr.send(data);
        }

</script>

</body>
</html>

iframe 和 form 上傳文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>文件上傳</h1>
<form action="/ajax.html/" method="post" id="fm" target="iframe" enctype="multipart/form-data">
    <input type="text" name="k1">
    <input type="text" name="k2">
    <input type="file" name="k3">
    <a onclick="test()">提交</a>
</form>
<iframe name="iframe" id="ifr"></iframe>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test() {
        document.getElementById(("ifr")).onload = onloadtest; // 按下按鈕時為iframe綁定
        document.getElementById("fm").submit();
    }
    function onloadtest() {
        console.log($(this).contents().find('body').html());
    }
</script>
</body>
</html>

iframe 的框可以設置為 display:none 已脓，就隱藏了

上傳文件珊楼，并在服務器端保存，保存完畢后在網(wǎng)頁上顯示出來度液。

# views.py 文件
from django.shortcuts import render
from django.shortcuts import HttpResponse
import json
import os
import uuid

def index(request):
   if request.method == "GET":
       return render(request, "index.html")

def upload(request):
   nid = uuid.uuid4()
   result = {'status':True,"data":None}
   img = request.FILES.get("img")
   print(img.name)
   base_dir = os.path.join("static",str(nid)+img.name)
   f = open(base_dir,"wb")
   for line in img.chunks():
       f.write(line)
   f.close()
   print(base_dir)
   result["data"] = '\\' + base_dir
   return HttpResponse(json.dumps(result))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上傳</title>
</head>
<body>
<form action="/upload.html/" method="post" id="fm" target="iframe" enctype="multipart/form-data">
    <input type="file" name="img" onchange="test()">
</form>
<iframe name="iframe" id="ifr" style="display: none"></iframe>
<h3>預覽</h3>
<div id="preview"></div>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test() {
        document.getElementById(("ifr")).onload = onloadtest; // 按下按鈕時為iframe綁定
        document.getElementById("fm").submit();
    }
    function onloadtest() {
        var response = $(this).contents().find('body').html();
        response = JSON.parse(response);
        console.log(response);
        console.log(response.data);
        var image = $("<img>");
        image.attr("src",response['data']);
        $("#preview").empty().append(image)

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

jsonp厕宗，跨域請求画舌，利用script可以跨域的特性實現(xiàn)跨域交流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="submit" value="發(fā)送1" onclick="test1()">
<input type="submit" value="發(fā)送2" onclick="test2()">
<div id="preview"></div>

<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test1() {
        $.ajax({
            url: "/ajax.html",
            type: 'GET',
            data: {bbc: 222},
            success: function (arg) {
{#                console.log(arg);#}
                var p_ele = $("<p>");
                p_ele.html(arg);
                $("#preview").append(p_ele);
            }
        })
    }
    function test2() {
        var tag = $("<script>");
        tag.attr('src','http://127.0.0.1:9000/jsonp.html');
        document.head.appendChild(tag[0]);
        document.head.removeChild(tag[0]);
    };
    function func(arg) {  # 這里的 func 要和返回的一致已慢，arg為返回的數(shù)據(jù)曲聂，也就是 anthor server 
        var p_ele = $("<p>");
        p_ele.html(arg);
        $("#preview").append(p_ele);
    }
</script>
</body>
</html>

# 我在 9000 端口上運行了另一個 django ，相對應的視圖函數(shù)為
def jsonp(request):
    return HttpResponse("func('anthor server');")

在jquery上佑惠，也為我們做好了封裝朋腋，看下面的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="submit" value="發(fā)送1">
<input type="submit" value="發(fā)送2" onclick="test2()">
<div id="preview"></div>

<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test2() {
        $.ajax({
            url: "http://127.0.0.1:9000/jsonp.html",
            type: 'GET',
            dataType: 'jsonp',  // 不同于json，這里封裝了創(chuàng)建script標簽并移除的代碼膜楷，
        })  // 效果也是一樣的
    }
    function func(arg) {
        var p_ele = $("<p>");
        p_ele.html(arg);
        $("#preview").append(p_ele);
    }
</script>
</body>
</html>

note

提交：
    - Form
    - Ajax

一旭咽、Ajax，偷偷向后臺發(fā)請求
    - XMLHttpRequest
        - 手動使用
        - jQuery
    - “偽”Ajax
        - iframe標簽
        - form表單
    
二赌厅、Ajax上傳文件
    - jQuery
    - 原生
    以上兩種方式可利用formData對象穷绵，來封裝用戶提交的數(shù)據(jù),但是formData并不是所有瀏覽器都支持，
    還是兼容性的問題特愿，（考慮到低版本的IE）
    
    - Iframe+Form 兼容性最好的方式
    
    ******Iframe+Form*******



三请垛、JSONP 跨域Ajax
    
    瀏覽器同源策略：XMLHttpRequest
    巧妙的機制JSONP
    
    JSONP：是一種方式，并非數(shù)據(jù)結構洽议，返回數(shù)據(jù)時有條件限制，
        利用創(chuàng)建script塊漫拭，在其中執(zhí)行src屬性為：遠程url
        返回--函數(shù)(返回值)
        
        function 函數(shù)(arg){
            
        }
         jsonp 只能發(fā)get請求亚兄，不管怎么寫，都是get方式
        
注意：CORS  采驻，跨站資源共享

參考博客：http://www.cnblogs.com/wupeiqi/articles/5703697.html
http://www.cnblogs.com/wupeiqi/articles/5702910.html

最后編輯于：2018.05.22 22:35:18

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末审胚，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子礼旅，更是在濱河造成了極大的恐慌膳叨，老刑警劉巖，帶你破解...
沈念sama閱讀 207,113評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件痘系，死亡現(xiàn)場離奇詭異菲嘴，居然都是意外死亡，警方通過查閱死者的電腦和手機汰翠，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,644評論 2贊 381
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門龄坪，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人复唤，你說我怎么就攤上這事健田。” “怎么了佛纫？”我有些...
開封第一講書人閱讀 153,340評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵妓局，是天一觀的道長总放。經(jīng)常有香客問我，道長好爬，這世上最難降的妖魔是什么局雄？我笑而不...
開封第一講書人閱讀 55,449評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮抵拘，結果婚禮上哎榴，老公的妹妹穿的比我還像新娘。我一直安慰自己僵蛛，他們只是感情好尚蝌，可當我...
茶點故事閱讀 64,445評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著充尉，像睡著了一般飘言。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上驼侠，一...
開封第一講書人閱讀 49,166評論 1贊 284
城市分裂傳說
那天姿鸿，我揣著相機與錄音，去河邊找鬼倒源。笑死苛预，一個胖子當著我的面吹牛，可吹牛的內容都是我干的笋熬。我是一名探鬼主播热某，決...
沈念sama閱讀 38,442評論 3贊 401
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼胳螟！你這毒婦竟也來了昔馋？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 37,105評論 0贊 261
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤糖耸，失蹤者是張志新（化名）和其女友劉穎秘遏，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嘉竟，經(jīng)...
沈念sama閱讀 43,601評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡邦危，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 36,066評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了舍扰。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片铡俐。...
茶點故事閱讀 38,161評論 1贊 334
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖妥粟，靈堂內的尸體忽然破棺而出审丘，到底是詐尸還是另有隱情，我是刑警寧澤勾给，帶...
沈念sama閱讀 33,792評論 4贊 323
?日本核電站爆炸內幕
正文年R本政府宣布滩报，位于F島的核電站锅知，受9級特大地震影響，放射性物質發(fā)生泄漏脓钾。R本人自食惡果不足惜售睹，卻給世界環(huán)境...
茶點故事閱讀 39,351評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望可训。院中可真熱鬧昌妹，春花似錦、人聲如沸握截。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,352評論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽谨胞。三九已至固歪，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間胯努，已是汗流浹背牢裳。一陣腳步聲響...
開封第一講書人閱讀 31,584評論 1贊 261
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留叶沛，地道東北人蒲讯。一個月前我還...
沈念sama閱讀 45,618評論 2贊 355
代替公主和親
正文我出身青樓，卻偏偏與公主長得像灰署，于是被迫代替她去往敵國和親伶椿。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 42,916評論 2贊 344

ajax 補充

推薦閱讀更多精彩內容