JSON学习笔记

/ 0评 / 0

JSON

  1. Json介绍
    • JSON:JavaScript Object Notation
    • 定义:是一种轻量级的数据交换格式。JS的一个语法子集;采用完全独立于编程语言的文本格式来存储和表示数据。
    • 优势:简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
    • 应用:Ajax中,允许将复杂格式响应数据构建成JSON格式再进行响应
  2. JSON表示

    1. JSON表示单个对象

      • 使用{}表示单个对象
      • 在{}中使用key:value形式来表示属性(数据)
      • Key必须要用“”引起来
      • value如果是字符串的话,也需要用""引起来
      var obj = {
              "name":"王老师",
              "age" : 30,
              "gender" : "Unknown"
      }
      
    2. JSON表示一个数组

      • 使用[]表示一个数组
      • 数组中允许包含若干JSON对象或字符串

        1. 使用JSON数组表示若干字符串
        2. 使用JSON数组表示若干对象
        var arr = [
            {
                "name":"王老师",
                "age":30,
                "gender":"男"
                                },
            {
                "name":"王夫人",
                "age":28,
                "gender":"男"
                                }
            ];
        
  3. 使用jq的each()迭代数组

    1. JS中遍历数组

      var a = [{"name":"guoxiaonao", "age": 18 }, {"name":"guoxiaonao2", "age": 22}];
      
      for (var i = 0 ; i < a.length ; i++ ){
          var obj = a[i];
          console.log('name is ' + obj.name);
          console.log('age is '+ obj.age);
      }
      
    2. $arr.each();

      $arr : jQuery中的数组
          //语法:
      $arr.each(function(index,obj){
          index:遍历出来的元素的下标
          obj:遍历出来的元素
      });
      
    3. $.each()

       //语法:
      $.each(arr,function(index,obj){});
      arr : js 中的普通数组
      
  4. 后台处理JSON
    台查询出数据再转换为JSON格式字符串,再响应给前端。

    1. 后台先获取数据 类型允许为:元组|列表|字典
    2. 在后台将数据转换为符合JSON格式字符串
    3. 后台将JSON格式字符串进行响应
  5. Python中JSON处理

    • Djang中的JSON处理

      import json
      #序列化 - python对象变为json字符串
      jsonStr = json.dumps(元组|列表|字典)
      #反序列化 - json字符串变为python对象
      py_obj = json.loads(jsonStr)
      

      #方法1 使用Django中提供的序列化类来完成QuerySet到JSON字符串的转换
      from django.core import serializers
      json_str = serializers.serialize('json',QuerySet)
      return HttpResponse(json_str)
      ​
      #方法2
      d = {'a': 1}
      return JsonResponse(d)
      
  6. 前端中JSON处理

    • 序列化与反序列化

      #序列化
      JSON字符串JSON.stringify(JSON对象)
      ​
      #反序列化
      JSON对象=JSON.parse(JSON字符串)
      
    • 示例

      <script src="/static/js/jquery-1.11.3.js"></script>
      <script>
      $(function(){
          // 1. 检查用户名是否存在
          $('#uname').blur(function(){
              $.ajax({
                  url:'/uname_check?uname=' + $('#uname').val(),
                  type:'get',
                  success:function(res){
                      $('#show').html(res);
                  }
              })
          })
          // 2. post请求
          $('#btn').click(function(){
              // 1 获取数据
              var uname = $('#uname').val();
              var age = $('#age').val();
              var csrf = $("[name='csrfmiddlewaretoken']").val();
              var params = 'uname='+uname+'&age='+age+'&csrfmiddlewaretoken='+csrf;
              // 2. 打印测试
              console.log(params);
              // 3.发送异步post请求
              $.ajax({
                  url:'/register',
                  type:'post',
                  data:params,
                  success:function(res){
                      alert(res);
                  }
              })
      
          })
      
      })
      </script>
      

跨域

  1. 概念:非同源的网页,相互发送请求的过程,就是跨域。

    浏览器的同源策略:
    同源:多个地址中,相同协议,相同域名,相同端口被视为是"同源"
    在HTTP中,必须是同源地址才能互相发送请求,非同源拒绝请求(<script>和<img>除外)。
    ​
    http://www.tedu.cn/a.html
    http://www.tedu.cn/b.html
    以上地址是 "同源"
    ​
    http://www.tedu.cn/a.html
    https://www.tedu.cn/b.html
    由于 协议不同 ,所以不是"同源"
    ​
    http://localhost/a.html
    http://127.0.0.1/a.html
    由于 域名不同 ,所以不是"同源"
    ​
    http://www.tedu.cn:80/a.html
    http://www.tedu.cn:8080/b.html
    由于端口不同 , 所以不是"同源"
    
  2. 解决方案

    • 通过 <script>向服务器资源发送请求
    • 由服务器资源指定前端页面的哪个js方法来执行响应的数据
  3. Jquery跨域

    jsonp - json with padding
    用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据
    
    ex:
        当前地址: http://127.0.0.1:8000/index
        欲访问地址: http://localhost:8000/data?callback=xxx
    
        $.ajax({
            url:'xxx',
            type:'get',
            dataType:'jsonp',//指定为跨域访问
            jsonp:'callback',//定义了callback的参数名,以便获取callback传递过去的函数名
            jsonpCallback:'xxx' //定义jsonp的回调函数名
        });
    
        $.ajax({
            url:'xxx',
            type:'get',
            dataType:'jsonp',//指定为跨域访问
            success: function(data){}
        });
    

    4.代码示例:

    <script>
    // 预留函数[服务器响应成功后调用]
    function print(data){
        alert(data);
    }
    $(function(){
        $('#btn').click(function(){
            /*
            // alert(111);
            // 1 获取body标签
            var body = document.getElementsByTagName('body')[0];
            // 2 创建script标签
            var script = document.createElement('script');
            // 3 为script标签的属性赋值
            script.type = 'text/javascript';
            script.src='http://localhost:8000/cross_server?callback=print';
            // 4 添加到boby标签
            body.append(script);
    
            $.ajax({
                url:'http://localhost:8000/cross_server',
                type:'get',
                dataType:'jsonp',
                jsonp:'callback',
                jsonpCallback:'print'
            });
            */
    
            $.ajax({
                url:'http://localhost:8000/cross_server_json',
                type:'get',
                dataType:'jsonp',
                success:function(data){
                    alert(data.name + "," + data.age);
                }
            });
        });
    })
    </script>
    

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注