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);
   }
});