ajax

ajax

场景

1.页面刷新 登录用户名留下 用户体验好 通过form表单
2.页面不刷新 登录注册用户名留下 ajax

form表单

1.在使用ajax提交数据时,写在表单中
<input type = 'submit>
 <button></button>
 这两个写在form表单中,点击会触发form表单的action ,体会不到ajax
 正确:
 方式一:
 form表单中  <input type = 'button'>
 方式二:
 将<input type = 'submit>
 <button></button>
 放在form表单外

js注释

// 或者 {}

 

jquery封装版ajax

异步的发送请求  局部刷新页面(做一些页面的动态效果,DOM操作处理)
1.局部 异步刷新应用请求用的,不会刷新整个页面,接收到响应,提取部分数据做成标签,放到页面里
2. django view里 return redirect('login') 告诉浏览器重定向,但使用ajax时不会重定向
js 中 键可以不加引号
$.ajax({
    方式一:
    url:'/login/',
    方式二:
    url:"{% url 'login'%}"
   type:'post',
    data:{
      username:$('#username').val(),
      pwd:$('#').val()
      方式一:
      csrfmiddlewaretoken:$('[name = csrfmiddlewaretoken ]')
      方式二:
      csrfmiddlewaretoken:{{csrf_token}}
      
    }
    success:function(response){
         var restr = JSON.parse(response)
         if(条件){
         
         }else if(条件){
         
         
         }
       response #响应内容
    }
},
error:function(data){},
complete:function(data){}
statusCode:function(data){}
)

外部文件导入方式来写js代码,那么js代码中不能写django模板语法,因为html文件的加载顺序:url--视图--

html模板渲染--return给浏览器--浏览器渲染--script的src -- 才去请求js文件 --那么这个js文件的代码才

加载到你的htnl文件中,--就没有模板渲染的不住了

代码展示

<script>
    $('.carousel').carousel({
        interval: 5000
    });
    $('#btn_1').click(function () {
        $.ajax({
            url: "{% url 'login' %}",
            type: 'post',
            data: {
                name: $('#user_1').val(),
                pwd: $('#pwd_1').val(),
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function (response) {
                var res = JSON.parse(response);
                if (res['code'] === 3) {
                    location.href = res['redirect_url']
                } else if (res['code'] === 4) {
                    $('.form-group').each(function (k, v) {
                            $(v).addClass('has-error')
                        },
                        $('span.glyphicon').each(function (k, v) {
                            $(v).removeClass('hide')
                        }),
                        $('#helpBlock2').removeClass('hide')
                    )
                }
            }
        })
    });
​
​
</script>

 

ajax 补充

1. Httpresponse(data_json,content_type = 'application/json')
加了一个响应头信息,content_type 这是json数据
​
django,ajax框架内部有解析器(反序列化机制),加入content_type之后,就能解析json数据
​
js中,{user:'aa'} --> 叫自定义对象,自定义对象键可以不加引号
ajax中指定json数据格式方法,
django 没有内置解析json数据的解析器,所以ajax发送json请求数据,request.post.get()
拿不到,拿到的是none,
$.ajax({
   type:'get',
   contentType:'application/json'
})
假如数据格式: application/json 
如果请求方式是get 可以通过 request.get_full_path  提取数据
如果请求方式是post,可以通过request.body 拿到原始数据 eg:b'alslla'
把字节数据 解码 decode('utf-8') 再反序列化
​

JsonResponse 对象

from django.http import JsonResponse
原理:
JsonResponse 封装了 content_type = 'application/json' 响应头信息并且 内置封装了 json.dumps()方法
​
return JsonResponse(d1,safe = False) 非字典的数据,必须加 safe = False
return JsonResponse(dic) 字典数据可以直接放进去
​

ajax XmlHttpRequest对象 -->XHR xml用来文本传输的,太臃肿被json替换

浏览器 network里的XHR就是ajax 发送的请求,爬虫的时候要注意,好多内容可能使用ajax请求的