Ajax

 

1. 当 data 数据为字符串时候

2. 当 data 数据为数组的时候，需要加入 traditional:True

3. 当 data 数据为字典时候，   需要使用 JSON.stringify( 字典) 进行转换

 

4. ajax 一键获取表单所有数据  $( '#formid' ).serialize()

$.ajax({
                        url:'/abc/addbook.html',
                        type:'post',
                        data:{
　　　　　　　　　　　　　　　　　　‘v1’:[1,2,3],
　　　　　　　　　　　　　　　　　　'v2':JSON.stringify( {'name':'jack'} )
　　　　　　　　　　　　　　 },
　　　　　　　　　　　　　　 traditional:True,
                        dataType:'json',
                        success:function(result){
                             console.log(result)
                             if(result.status){
                                createRow(result)
                                $('#addModal').modal('hide')
                             }else{
                                $('#msg').text(result.msg)
                             }
                        }

  })

 

 

伪Ajax

　　通过利用 iframe 标签来制造ajax特性，来实现表单提交

　1.  当表单的 target 和 iframe 进行绑定之后，表单提交后，views返回的数据会传递给 iframe 里面

    2. 当 iframe里面有内容后，会自动触发 onload事件

    3. 通过onload事件触发的函数来获取 iframe 里面的内容

def iframe(request):
    import json
    fab=request.POST.get('fab')
    return HttpResponse(json.dumps({'fab':fab}))

 

<iframe name="iframe"  id="my_iframe" hidden="hidden"></iframe>

<form action="{% url 'index:iframeAction'%}"  method="post" target="iframe">
      {%csrf_token %}
      <input type="text" name="fab" value="Array">
      <button type="button" onclick="func_submit()">submit</button>
</form>

<script>
    function func_submit(){
        $('form').submit()
        document.getElementById('my_iframe').onload=reload
    }
    function reload(){
        alert(666)
        var text=this.contentWindow.document.body.innerHTML <!--获取iframe里面的内容-->
        text=JSON.parse(text)
        console.log(text)
    }
</script>

 

 

Ajax文件上传

 

function(){
            var data=new FormData();  // 用于支撑表单数据包含文件类型的数据
            data.append('name', $('#name').val() )
            data.append('age', $('#age').val() )
            data.append('image', $('#mage').files[0] )
            $.ajax({
                url:'',
                type:'post',
                data:data,
                success:function(result){
                }
                processData:false, 
                contentType:false,
            })
        }

 

 

跨域Ajax JSONP技术：

 

　　当前端页面需要发送请求去获取非本地服务器的数据是，由于浏览器的同源策略不能发送成功!

function submit_json_p(){
    $.ajax({
        url:'http://10.214.160.112:8080/loaddata.html',     XXXX ! 这是不能发送的!         
        type:'GET',
        data:{'name':'jack'},
        success:function(args){                             
        }
    })
}                    

 

      巧妙使用JSONP机制

      1.本地前端

function submit_json_p(){  # 手动创建jsonp请求
    // 1. 当创建了scripe标签添加了src属性并添加到页面上,这个请求地址就自动的执行了
    var tag=document.createElement('script')
    tag.src='http://10.214.160.112:8080/loaddata.html?callback=method'
    document.head.appendChild(tag)
    // 2. 添加完成后执行了后就可以删除了
    document.head.removeChild(tag)
}

function method(args){
    alert(args)
}

function submit_json_p(){  # 使用jquery自带jsonp请求
    // jquery内部会自动创建script标签
    $.ajax({
        url:'http://10.214.160.112:8080/loaddata.html',

　　　　 type：'GET', // jsonp只能发送GET请求
　　　　 dataType:'jsonp',
　　　　 jsonp:'callback', // 请求参数名
　　　　 jsonpCallback:'method', // 请求参数值

        error:function(args){
            alert('请求失败!')
        }
    })
}

 

   2. 远程服务器的后端

 

def json_p(request):
    name=request.GET.get('callback')
    # name为前端 js传过来要执行的函数名
    data = "%s('hello JSONP')"%(name)
    return HttpResponse(json.dumps(data))