django学习第十天---ajax请求和JsonResponse

AJAX

• 它是js的功能，特点：异步请求，局部刷新

简单请求示例

• 基于jquery的ajax请求
• 异步请求，不会刷新页面，页面上用户之前输入的数据都不会丢失

      <p>下面是ajax请求</p>
      <div>
            <label>
            用户名:<input type='text' name='username' id='username'>
            </label>
             <label>
            密码:<input type='text' name='password' id='password'>
            </label>
            <button id='btn'>提交</button>
      </div>

      <script src='/static/js/jquery.js'></script>
      <script>
            $('#btn').click(function(){
                  var uname = $('#username').val();#取到input标签输入的值
                  var pwd = $('#password').val();

                  $.ajax({
                        url:'/login_ajax/', #可以是相对路径，可以是绝对路径，浏览器不会跳到这个路径，这是ajax请求发送请求，往哪里发使用的
                        type:'post', #请求方法
                        data:{xx:uname,pp:pwd} #ajax请求携带参数和格式
                        success:function(res){
                              #success对应的function表示请求成功(正常)之后自动执行的函数
                              #res名字随便写，res得到的就是响应数据
                              console.log(res,typeof res);
                  }
            })
      })
      </script>

完整的一个ajax登录示例

      <form action='/login/' method='post'>
            用户名:<input type='text' name='username' value='{{ uanme }}'>
            密码:<input type='text' name='password'>
            <button>提交</button>
            <span style='color:red;'>{{ error }}</span>
      </form>

      <p>下面是ajax请求</p>
      <div>
            <label>
                  用户名:<input type='text' uname='username' id='username'>
            </label>
            <label>
                  密码:<input type='text' name='password' id='password'>
            </label>
            <button id='btn'>提交</button>
            <span id='error_msg' style='color:red;font-size:12px;'></span>
      </div>

      <script src='/static/js/jquery.js'></script>
      <script>
            $('#btn').click(function(){
                  var uname = $('#username').val()
                  var pwd = $('#password').val()

                  $.ajax({
                        url:'/login_ajax/',#可以是相对路径，可以是绝对路径
                        type:'post',
                        data:{xx:uname,pp:pwd}
                        success:function(res){
                              #success对应的function表示请求成功(正常)之后自动执行的函数
                              #res名字随便写，res得到的就是响应数据
                              if (res==='ok'){
                                    #登录成功
                                    location.href='/home/',#跳转页面
                              }else{
                                    #登录失败
                                    $('#error_msg').text('用户名或者密码错误')
                                    }
                  }
            })
      })
      </script>

注意点

      $.ajax({
            url:'/login__ajax/'，#写路径时，如果后台使用的是django框架，那么url路径的后面的斜杠要加上，如果想不加上斜杠，那么需要在django的settings配置文件中加上 APPEND_SLASH=False,并且后台的urls.py文件中的路径要和ajax请求路径对应好，该有斜杠写斜杠，不需要写斜杠的，去掉斜杠
      })

在js代码中可以使用url别名反向解析来写路径

      $.ajax({
            url:'{% url 'login_ajax' %}',
            type:'post',
            data:{xx:uname,oo:pwd}
            success:function(res){
                  ...
            }
      })
      但是要注意一点，当这段js代码是写到某个js文件中，然后html文件通过script标签的src属性来引入时，你的{% url 'login_ajax' %}语法就不能被模板渲染了，也就是失效了

通过httpresponse响应字典类型数据

      list.html文件内容
      $('#btn').click(function(){
            $.ajax({
                  url:'/data/',
                  type:'get',
                  success:function(res){
                        console.log(res,typeof res);
                        //{"name":"xx","hobby":["女","gay"]} 这个是从后台序列化传过来的数据，所以是string类型
                        var res_dict =JSON.parse(res) //反序列化成字典object
                        //var hobby = res_dict['hobby']
                        var hobby = res_dict.hobby; //['女','gay']
                        console.log(hobby);

                        //将数据放到li标签中，然后添加到ul标签中进行列表数据展示
                        for (var i=0;i<res.length;i++){
                              var content = res[i]
                              var liStr = `<li>${concent}</li>`
                              $('ul').append(liStr)
                        }
                  }
            })
      })

      views.py文件内容
      import json
      def data(request):
            data_list = {'name':'xx','hobby':['女','gay']}
            date_list_str = json.dumps(data_list,ensure_ascii=False)
 #ensure_ascii=False把传输过后显示的unicode正常显示为中文
            #直接使用HttpResponse回复字典类型数据，那么会将字典里面的元素的键都拼接成一个字符串来响应，所以不是我们想要的结果，所以我们先将字典类型数据，转换成json字符串，在通过HttpResponse来进行响应
            return HttpResponse(data_list_str)

      urls.py内容如下
      url(r'^data/',views.data)

JsonResponse

      views.py文件
      import json
      def data(request):
            data_list = {'name':'xx','hobby':['女','gay']}
            #第一种方式,直接通过httpresponse回复字典数据，那么ajax接收到数据之后，需要自行反序列化
            data_list_str = json.dumps(data_list,ensure_ascii=False)
            #直接使用httpresponse回复字典类型数据，那么会将字典里面元素的键都拼接成一个字符串来响应，所以不是我们想要的结果，所以我们先将字典类型数据，转换成json字符串，在通过httpresponse来进行响应
            return HttpResponse(data_list_str)

            #第二种方式：通过HttpResponse回复字典数据，回复之前，加上一个响应头键值对，如下，那么ajax收到这个响应数据的时候，会查看这个响应头，发现content-type这个响应头的值为application/json,那么会自动对响应数进行反序列化，不需要我们自己手动反序列化了
            #手动加上ret['content-type'] ='application/json'响应头
            ret = HttpResponse(data_list_str)
            ret['content-type'] = 'application/json'
            return ret

            #第三种方式 JsonResponse
            #JsonResponse主要做两件事，1.序列化数据，2.加上['content-type']='application/json'这个响应头键值对
            return JsonResponse(data_list)

            #三种方式总结：
            第一种需要自己序列化和反序列化，
            第二种需要先序列化，然后加响应头自动反序列化，
            第三种是直接自动序列化和反序列化

            注意点：
            hobby_list = ['女','gay']
            #当使用JsonResponse回复非字典类型数据时，需要将safe参数的值改为False
            return JsonResponse(hobby_list,safe=False)

请求头消息格式分析

      请求消息格式和请求方法没有关系
      和请求头键值对中的这一组键值对有关系
      Content-Type:application/x-www-form-urlencoded;//浏览器发送数据ajax或者form表单，默认的格式都是它
      它表示请求携带的数据格式，application/x-www-form-urlencoded对应的数据格式：a=1&b=2

      socket 接收到我们请求数据，会分析一下Content-Type: application/x-www-form-urlencoded;这个请求头

    # 叫做解析器
    if Content-Type == 'application/x-www-form-urlencoded':
        data = 'a=1&b=2'
        l1 = data.split('&')  [a=1,b=2]
        for i in l1:
            k,v = i.split('=')
        if 请求方法 == 'GET':
            request.GET[k] = v

    elif Content-Type == 'multipart-formdata':
        request.FILES     

    #django没有内置对appcation/json的消息格式的解析器，所以如果请求数据

<script>
    $('#sub').click(function () {
        var a = $('[name="a"]').val();  #通过name属性找到标签
        var b = $('[name="b"]').val();
        $.ajax({
            url:'/sub/',
            {#type:'get',#}
            type:'post',
            headers:{
                'Content-Type':'application/json',
            },
            {#data:{aa:a,bb:b},#}
            data:JSON.stringify({aa:a,bb:b}),
            // /sum/?aa=1&bb=2
            // 也就是说，如果请求方法为get，那么data属性中的键值对数据，会自动拼接到请求路径后面，作为查询参数来携带请求数据
            success:function (res) {
                alert(res);
            }
        })
    })
</script>