ajax擴展、jsonp、

偷偷上傳消息，首先想到ajax

而ajax是jquery是咱們封裝的功能。

方式一：ajax發消息

$.ajax({
    url: '/ajax3.html',
    type: 'GET',           //或者是POST
    data: {nid:2},
    datetype:JSON,          //聲明後，arg會自動處理傳入success,字符串--->對象
    success:function (arg) {
        // $('#content').html(arg);
    }
})

　

方式二：原生XMLHttpRequests

ajax在內部是對XMLHttpRequests進行了封裝，

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4){                //有0-4種狀態
        // 接收完畢服務器返回的數據
        console.log(xhr.responseText);
    }
};
xhr.open('GET','/ajax1.html?p=123');
xhr.send(null);

xhr.open('POST','/ajax1.html');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
xhr.send(null)
//      :----->當以POST方式提交時
原生語句須要一對特殊的請求頭Content-Type，而這是由django決定的
若是不添加這對請求頭django是不會對消息進行處理的,只會發到；
能夠在request.body查到，但在get/post裏查不到。

方式三：僞ajax     兼容性很好，不少上傳文件都用

是指利用iframe+form實現偷偷發消息，即form的數據經過iframe提供的通道傳輸數據，不會使頁面刷新。

iframe歷史悠久，能夠嵌套別人家的網站的東西

form傳送數據會使頁面刷新，

<iframe id="iframe" name="ifra"></iframe>
<form id="fm" action="/ajax1.html" method="POST" target="ifra">
    <input name="root" value="111111" />
    <a onclick="AjaxSubmit5()">提交</a>
</form>

function AjaxSubmit5() {
　　// 標籤加載的時候自動執行
    document.getElementById('iframe').onload = reloadIframe;
    document.getElementById('fm').submit();
}

function reloadIframe() {
　　//this在這裏默認指的是iframe標籤
    var content = this.contentWindow.document.body.innerHTML;
    var obj = JSON.parse(content);
    if(obj.status){
        alert(obj.message);
    }
}

　　

----------------------------文件上傳-----------------------------

在jquery裏封裝了一個FormData類;

方式一：ajax　　// jquery提供的

var data = new FormData();
data.append('k1','v1');
data.append('k2','v2');
data.append('k3',document.getElementById('img').files[0]);

$.ajax({
    url: '/ajax1.html',
    type: 'POST',
    data:data,
    success:function (arg) {
        console.log(arg)
    },
     processData: false,  // tell jQuery not to process the data
     contentType: false  // tell jQuery not to set contentType
})
// 從ajax傳遞消息可知對data添加了請求頭,
// 而如今以FORMdate這種方式處理數據來講，咱們就不用ajax在對數據進行處理，直接發送就能夠了
// 所以要加上這兩句話。

 

 

方式二：原生語句XMLHttpRequests

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){
        // 接收完畢服務器返回的數據
        console.log(xhr.responseText);
    }
};
xhr.open('POST','/ajax1.html');
xhr.send(data);

 

方式三：僞ajax

　　 <iframe style="display: none" id="iframe1" name="ifra1"></iframe>
    <form id="fm1" action="/ajax1.html" method="POST" enctype="multipart/form-data" target="ifra1">
        <input type="text" name="k1" />
        <input type="text" name="k2" />
        <input type="file" name="k3" />
        <a onclick="AjaxSubmit8()">提交</a>
    </form>


    <script src="/static/js/jquery-3.1.1.js"></script>
    <script>
        function AjaxSubmit8() {
            document.getElementById('iframe1').onload = reloadIframe1;
            document.getElementById('fm1').submit();
        }
        function reloadIframe1() {
            var content = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(content);
            console.log(obj);
        }
    </script>

　

 

$.ajax({  
   type: "POST",  
   url: "/Mall/ajax_cart.html",  
   data: $(form).serializeArray(),  
                        dataType: 'json',  
   success: function(msg){  
       $("#allmoney").html("¥"+msg);  
   }  
});