Django Ajax总结

Ajax-Jquery

对话框添加，删除，修改：
    添加：
        Ajax偷偷向后台发请求：
            1. 下载引入jQuery
            2. 
                $.ajax({
                    url: '/add_classes.html',
                    type: 'POST',
                    data: {'username':'root','password': '123'},
                    success:function(arg){
                        // 回调函数，arg是服务端返回的数据
                    }
                 })
    
    1. 
    Python序列化
        字符串 = json.dumps(对象)    对象->字符串
        对象 = json.loads(字符串)    字符串->对象
        
    JavaScript:
        字符串 = JSON.stringify(对象) 对象->字符串
        对象 = JSON.parse(字符串)     字符串->对象
        
    应用场景：
        数据传输时，
            发送：字符串
            接收：字符串 -> 对象
2. ajax

    $.ajax({
        url: 'http//www.baidu.com',
        type: 'GET',
        data: {'k1':'v1'},
        success:function(arg){
            // arg是字符串类型
            // var obj = JSON.parse(arg)
        }
    })
    
    
    $.ajax({
        url: 'http//www.baidu.com',
        type: 'GET',
        data: {'k1':'v1'},
        dataType: 'JSON',
        success:function(arg){
            // arg是对象
        }
    })
    
    $.ajax({
        url: 'http//www.baidu.com',
        type: 'GET',
        data: {'k1':[1,2,3,4]},
        dataType: 'JSON',
        success:function(arg){
            // arg是对象
        }
    })
    
    发送数据时：
        data中的v
        
        a. 只是字符串或数字
            $.ajax({
                url: 'http//www.baidu.com',
                type: 'GET',
                data: {'k1':'v1'},
                dataType: 'JSON',
                success:function(arg){
                    // arg是对象
                }
            })
        b. 包含属组
            $.ajax({
                url: 'http//www.baidu.com',
                type: 'GET',
                data: {'k1':[1,2,3,4]},
                dataType: 'JSON',
                traditional: true,
                success:function(arg){
                    // arg是对象
                }
            })
        # 在服务端只要POST.get("k1")直接取
        # form表单的serialize只是把它变成字典格式的，不需要使用datatype:json 
        #http://www.cnblogs.com/haiyan123/p/7837439.html
            
        c. 传字典
        
            b. 包含属组
            $.ajax({
                url: 'http//www.baidu.com',
                type: 'GET',
                data: {'k1': JSON.stringify({}) },
                dataType: 'JSON',
                success:function(arg){
                    // arg是对象
                }
            })
            # 此时在服务器端需要使用json.load(k1)
            
    
3. 事件委托

    $('要绑定标签的上级标签').on('click','要绑定的标签',function(){})

    $('要绑定标签的上级标签').delegate('要绑定的标签','click',function(){})

4. 编辑
    

5. 总结

        新URL方式：
            - 独立的页面
            - 数据量大或条目多
            
        对话框方式：
            - 数据量小或条目少
                -增加，编辑
                    - Ajax: 考虑，当前页；td中自定义属性
                    - 页面（***）
                
        删除：
            对话框

ajax表单提交data使用values {“k”:values}

dataType:JSON 指定发送的数据格式为JSON字符串

traditional:true 当传递的数据包含数组时，需要设置此项

ajax 配合 json

https://www.cnblogs.com/linkenpark/p/7461709.html

{"k":[1,2,3]}

Ajax内容拾遗

1.内容拾遗
    - 新URL
        -提交时，保留之前的内容？？？？
    - 对话框
        - var data = $('#fmForm表单的ID').serialize();
         $.ajax({
            data: $('#fm').serialize()
         })

使用BookStrap进行前端框架开发

官网：https://v3.bootcss.com/getting-started/#download

font-awesome 图标插件

http://fontawesome.dashgame.com/

Ajax全套

http://www.cnblogs.com/wupeiqi/articles/5703697.html

发送请求

1.使用JQuery调用Ajax发送GET请求

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

2.使用JS原生发送AjaxGet请求

    function AjaxSubmit2() {
            var xhr = new XMLHttpRequest();
            <!-- 回调函数一定要在send前执行 -->
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    // 接收完毕服务器返回的数据
                    console.log(xhr.responseText);

                }
            };
            xhr.open('GET','/fs/ajax1.html?p=123');
            xhr.send(null);
        }

3.使用JQuery发送AjaxPOST请求

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

4.适应JS原生代码发送AjaxPOST请求

   function AjaxSubmit4() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    // 接收完毕服务器返回的数据
                    console.log(xhr.responseText);

                }
            };
            xhr.open('POST','/fs/ajax1.html');
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            xhr.send("p=456");
        }

---

使用IFrame伪造Ajax请求

iframe标签

iframe标签可以在指定区域内进行页面跳转和刷新，而不影响整个页面

iframe标签+forn组件可以实现伪造的Ajax请求

    <h3>3.莆田</h3>
    <div>

        <h6>基于Iframe+Form表单</h6>
        <iframe id="iframe" name="ifra"></iframe>
        <form id="fm" action="/fs/ajax1.html" method="POST" target="ifra">
            <input name="root" value="111111" />
            <a onclick="AjaxSubmit5()">提交</a>
        </form>

    </div>
    
   function AjaxSubmit5() {
    # 绑定onload事件
    document.getElementById('iframe').onload = reloadIframe;
    document.getElementById('fm').submit();
}

    function reloadIframe() {
        // this=当前标签
        //console.log(ths);
        //console.log(ths.contentWindow);
        //console.log(ths.contentWindow.document.body.innerHTML);
        //console.log($(ths).contents().find('body').html());
        var content = this.contentWindow.document.body.innerHTML;
        var obj = JSON.parse(content);
        if(obj.status){
            alert(obj.message);
        }
    }

form提交之后会刷新页面，但由于绑定了Target = ifra 所以只会刷新iframe标签中的内容而不影响全局，相当于是伪造的Ajax请求。

---

Ajax 上传文件

1.使用JQuery的Ajax上传文件

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

            $.ajax({
                url: '/fs/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

            })
        }

2.原生JS的Ajax上传文件

function AjaxSubmit7() {
            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','/fs/ajax1.html');
            xhr.send(data);
        }

Iframe+Form上传文件

案例1

  <iframe style="display: none" id="iframe1" name="ifra1"></iframe>
    <form id="fm1" action="/fs/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>
    
    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);
    }

案例2，添加预览上传的文件的功能

 <iframe style="display: none" id="iframe1" name="ifra1"></iframe>
    <form id="fm1" action="/fs/upload_img.html" method="POST" enctype="multipart/form-data" target="ifra1">
        <input type="file" name="k3" onchange="uploadFile();" />
    </form>
    <h3>预览</h3>
    <div id="preview">
    </div>



 function uploadFile() {
            document.getElementById('iframe1').onload = reloadIframe1;
            document.getElementById('fm1').submit();
        }
        function reloadIframe1() {
            var content = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(content);
            # 生成上传的文件的预览
            var tag = document.createElement('img');
            tag.src = obj.data;
            $('#preview').empty().append(tag);
        }

后台

def upload_img(request):
    import os
    import uuid # 保证上传我文件名称不一致

    nid = str(uuid.uuid4())
    ret = {'status':True,'data':None,'message':None}
    obj = request.FILES.get('k3')

    file_path = os.path.join('static', nid+obj.name)
    f = open(file_path,'wb')
    for line in obj.chunks():
        f.write(line)
    f.close()
    ret['data'] = file_path
    return HttpResponse(json.dumps(ret))

---

使用Ajax发送跨域请求

关于浏览器的同源策略

浏览器同源策略：XMLHttpRequest，使用request发送数据时，不运行发送给其他服务器，因此只能使用标签(如img script a )中的src这样的方式访问其他服务器，这样的方式称为JSONP

1.JSONP的使用

发送过来数据必须使用一个函数包裹数据,z比如这里是fuck(数据)，然后会执行fuck函数

     function submitJsonp2() {
            var tag = document.createElement('script');
            tag.src = 'http://127.0.0.1:9000/xiaokai.html';
            document.head.appendChild(tag);
            document.head.removeChild(tag);
        }

        function fuck(arg) {
            $('#content').html(arg);
        }

2.案例:Jquery使用JSONP

    function submitJsonp4() {
            $.ajax({
                url: 'http://127.0.0.1:9000/xiaokai.html',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback', //前端传过去的callback参数
                jsonpCallback: 'func'  //相当于callback=func
            }) //后端拿到了Callback就应该返回func(arg...)
        }
        function func(arg) {
            console.log(arg);
        }

    JSONP：
        利用创建script块，在期中执行src属性为：远程url
        函数(返回值)
        
        function 函数(arg){
            
        }

注意：JSONP只能发送GET请求，即使在JQuery中写成POST，还是会默认改成GET请求进行发送
http://www.cnblogs.com/wupeiqi/articles/5369773.html

2.利用CORS实现跨区操作，它能突破浏览器同源的限制

http://www.cnblogs.com/wupeiqi/articles/5703697.html