JSON学习笔记

一JSON介绍

JSON：JavaScript Object Notation

　　　　JS 对象表现方式

以JS对象的格式来约束前后端交互的字符串数据

二JSO-JS对象

使用 JS 对象表示一个人的信息，包含如下属性:

姓名:wangwc

年龄:30

身高:180

体重:180

var obj = {

　　name:"wangwc",

　　age:30,

　　height:180,

　　weight:180

}

console.log("姓名:"+obj.name);

三JSON规范

1.使用JSON表示单个对象

　　使用 {} 表示一个对象

　　在 {} 中使用key:value来表示属性(数据)

　　key必须使用""引起来

　　value如果是字符串的话，也必须使用""引起来

　　多对 key:value之间使用 , 分隔

　　示例:var obj = '{"name":"wangwc","age":30}';

2.使用JSON表示多个对象

　　使用 [] 来表示一组对象

　　示例:使用JSON表示2个人的信息

　　　　var users = '[{"name":"wangwc","age":30},{"name":"weimz","age":40}]';

四前端中处理JSON

将得到的JSON串转换成JS对象/数组

var js对象 = JSON.parse(JSON串);

#在前端中处理JSON格式字符串

url(r'^json/$', views.json_views),
# -----------------

def json_views(request):
  return render(request, 'json.html')

路由/视图配置文件

//file:json.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#btnJSON").click(function(){
        //1.模拟一个JSON字符串
        var flight = '{"flightNO":"NH980","from":"PEK","to":"KIX","time":"14:20"}';
        //2.通过JSON.parse()将JSON串转换成JS对象
        var obj = JSON.parse(flight);
        //console.log(obj);
        //3.解析对象
        console.log("航班号:"+obj.flightNO);
        console.log("出发:"+obj.from);
        console.log("到达:"+obj.to);
        console.log("时间:"+obj.time);
      });
      $("#btnJSONArr").click(function(){
        var str = '[{"flightNO":"NH980","from":"PEK","to":"KIX","time":"14:20"},{"flightNO":"NH979","from":"KIX","to":"PEK","time":"09:20"}]';
        var arr = JSON.parse(str);
        $(arr).each(function(i,obj){
          console.log("下标为"+i+"的元素");
          console.log("航班号:"+obj.flightNO);
          console.log("出发:"+obj.from);
          console.log("到达:"+obj.to);
          console.log("时间:"+obj.time);
        });   
      });
    });
  </script>
</head>
<body>
  <button id="btnJSON">JSON串->JS对象</button>
  <button id="btnJSONArr">JSON串->JS数组</button>
</body>
</html>

json.html

#-------显示结果---------

#JSON串->JS对象 显示结果
航班号:NH980
出发:PEK
到达:KIX
时间:14:20

#JSON串->JS数组 显示结果    
下标为0的元素
航班号:NH980
出发:PEK
到达:KIX
时间:14:20
下标为1的元素
航班号:NH979
出发:KIX
到达:PEK
时间:09:20

显示结果

五服务器端的JSON处理

　　1.在Python中的处理

　　　　1.允许将元组，列表，字典转换成JSON串

　　　　2.元组，字典，列表中的内容必须是

　　　　　　字符串，数字

　　　　　　元组，列表，字典

　　　　python中提供了json模块，json模块中提供dumps方法实现json串的转换

# 在服务器端处理JSON格式字符串

url(r'^server-json/$', views.server_json),

#------------------------

import json
# ====服务器端中处理JSON====
def server_json(requset):
  # 1.使用字典表示JSON数据
  dic = {
    'course': 'Ajax',
    'duration': 3,
    'place': 'BJ',
  }
  # 将dic通过json.dumps转换成JSON格式的字符串
  jsonStr = json.dumps(dic)
  # return HttpResponse(jsonStr)
  # 2. 使用列表表示多个JSON数据(列表中封装字典)
  list = [
    {
      'course': 'Ajax',
      'duration': 3,
      'place': 'BJ',
    },
    {
      'course': 'WEB',
      'duration': 3,
      'place': 'SH',
    },
    {
      'course': 'Python',
      'duration': 3,
      'place': 'CD',
    }
  ]
  jsonList = json.dumps(list)
  return HttpResponse(jsonStr + jsonList)

路由/视图配置文件

#--------------显示结果------------------

{"course": "Ajax", "duration": 3, "place": "BJ"}

[{"course": "Ajax", "duration": 3, "place": "BJ"}, {"course": "WEB", "duration": 3, "place": "SH"}, {"course": "Python", "duration": 3, "place": "CD"}]

显示结果

　　2.在Django中的处理

　　　　使用Django中提供的序列化模块来完成QuerySet到JSON串的转换

　　　　from django.core import serializers

　　　　jsonStr = serializers.serialize('json',QuerySet)

　　练习1:在服务器端中,读取Users表中的数据再转换成JSON串

#在服务器端中,读取数据库Users表中的数据,再转换成JSON串

url(r'^json-users/$', views.json_users_view),

#--------------------

from django.core import serializers
def json_users_view(request):
  users = Users.objects.all()
  # jsonUsers = json.dumps(users)
  # QuerySet不支持json.dumps转换
  jsonUser = serializers.serialize('json', users)
  return HttpResponse(jsonUser)

路由/视图配置文件

#-------------显示结果-----------
[
    {"model": "demo.users", "pk": 1, "fields": {"uname": "123", "upwd": "123", "uemail": "123", "nickname": "123"}}, 
    {"model": "demo.users", "pk": 26, "fields": {"uname": "11", "upwd": "11", "uemail": "11", "nickname": "11"}}, 
    {"model": "demo.users", "pk": 27, "fields": {"uname": "11", "upwd": "1", "uemail": "1", "nickname": "1"}}, 
    {"model": "demo.users", "pk": 28, "fields": {"uname": "11", "upwd": "1", "uemail": "1", "nickname": "1"}}, 
    {"model": "demo.users", "pk": 29, "fields": {"uname": "1", "upwd": "1", "uemail": "1", "nickname": "1"}}
]

显示结果

　　练习2:读取Users信息并显示在网页上(使用JSON)

# 读取Users信息并显示在网页上(使用JSON)

url(r'^json-users/$', views.json_users_view),
url(r'^server-json-users/$', views.server_json_users_view),

#-------------------------

from django.core import serializers

def json_users_view(reuqest):
  return render(reuqest, 'json-users.html')

def server_json_users_view(request):
  users = Users.objects.all()
  jsonusers = serializers.serialize('json', users)
  return HttpResponse(jsonusers)

路由/视图配置文件

//file:json-users.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/common.js"></script>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#btnShow").click(function(){
        var xhr = createXhr();
        xhr.open("get","/demo/server-json-users",true);
        xhr.onreadystatechange = function(){
          if(xhr.readyState==4 && xhr.status==200){
            //接收响应数据并转换成JS数组
            var arr = JSON.parse(xhr.responseText);
            var html = "";
            $(arr).each(function(i,obj){
              html+="<tr>";
               html+="<td>"+obj.pk+"</td>";
               html+="<td>"+obj.fields.uname+"</td>";
               html+="<td>"+obj.fields.upwd+"</td>";
               html+="<td>"+obj.fields.uemail+"</td>";
               html+="<td>"+obj.fields.nickname+"</td>";
              html+="</tr>";
            });
            $("#content").html(html);
          }
        }
        xhr.send(null);
      });
    });
  </script>
</head>
<body>
  <button id="btnShow">显示</button>
  <table width="500" border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>邮箱</th>
        <th>昵称</th>
      </tr>
    </thead>
    <tbody id="content"></tbody>
  </table>
</body>
</html>

json-users.html

六前端中将JS对象转换成JSON串

　　方法:JSON.stringify(jsObj)

　　作用:将jsObj转换成JSON串

七服务器端中将JSON串转换为字典/列表

　　方法:json.loads(jsonStr)

#1.前端中将JS对象转换成JSON串
url(r'^front-json/$', views.front_view),
#----------------------------
def front_view(request):
  return render(request, 'front-json.html')
#-----------显示结果-----------
转换后的值为:{"uname":"wang","uage":30,"ugender":"unknown"}

#================================================    

#2.服务器端中将JSON串转换为字典/列表
url(r'^server-json/$', views.server_json_view),
#------------------
def server_json_view(request):
  jsonStr = '{"uname":"wang","uage":30,"ugender":"男"}'
  # 通过json.loads() 将jsonStr转换成python字典
  dic = json.loads(jsonStr)
  s = "姓名:%s,年龄:%s,性别:%s" % (dic['uname'], dic['uage'], dic['ugender'])
  return HttpResponse(s)
#-----------显示结果----------------
姓名:wang,年龄:30,性别:男

路由/视图配置文件

//file:front-json.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#btnJSON").click(function(){
        var obj = {
          uname:'wang',
          uage:30,
          ugender:'unknown'
        }
        //通过JSON.stringify()将obj转换成JSON串
        var str = JSON.stringify(obj);
        console.log("转换后的值为:"+str);
      });
    })
  </script>
</head>
<body>
  <button id="btnJSON">JS对象->JSON串</button>
</body>
</html>

front-json.html

练习:通过JSON完成注册操作

# 通过JSON完成注册操作
url(r'^register-json/$', views.register_json_view),
url(r'^server-register-json/$', views.server_register_json_view),
# ====12.通过JSON完成注册操作====
def register_json_view(request):
  return render(request, 'register-json.html')

def server_register_json_view(request):
  jsonuser = request.GET['params']
  # 将jsonuser转换成Python字典
  user = json.loads(jsonuser)
  print('1111')
  try:
    Users.objects.create(uname=user['uname'],
                         upwd=user['upwd'],
                         uemail=user['uemail'],
                         nickname=user['nickname'])
    return HttpResponse('注册成功')
  except Exception as e:
    print(e)
    return HttpResponse('注册失败')

路由/视图配置文件

//file:register-json.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/common.js"></script>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#btnReg").click(function(){
        var xhr = createXhr();
        var params = {
          uname:$("#uname").val(),
          upwd:$("#upwd").val(),
          uemail:$("#uemail").val(),
          nickname:$("#nickname").val()
        }
        //将params转换为JSON串
        var str = JSON.stringify(params);
        xhr.open("get","/demo/server-register-json?params="+str,true);       
        xhr.onreadystatechange = function(){
          if(xhr.readyState==4 && xhr.status==200){
            alert(xhr.responseText);
          }
        }
        xhr.send(null);
      });
    })
  </script>
</head>
<body>
    <p>
      用户名称:<input type="text" id="uname">
    </p>
    <p>
      用户密码:<input type="password" id="upwd">
    </p>
    <p>
      电子邮箱:<input type="email" id="uemail">
    </p>
    <p>
      用户昵称: <input type="text" id="nickname">
    </p>
    <p>
      <input type="button" value="注册" id="btnReg">
    </p>
</body>
</html>

八JQ对AJAX的支持

1.$obj.load()

　　语法:$obj.load(url,data,callback)

　　　　url:请求地址

　　　　data:请求参数

　　　　callback:响应成功后的回调

　　作用:加载远程地址的内容到$obj中

　　用法:

　　　　1.data:请求参数[可选],如果没有参数则使用get方式

　　　　　　1.通过字符串传参

　　　　　　　　"key1=value1&key2=value2"

　　　　　　　　注:此种传参会使用get方式发送请求
　　　　　　2.通过JS对象传参
　　　　　　　　{
　　　　　　　　　　key1:"value1",
　　　　　　　　　　key2:"value2"
　　　　　　　　}
　　　　　　　　注:此种传参会使用post方式发送请求
　　　　2.callback:响应成功后的回调函数[可选]
　　　　　　function(resText){
　　　　　　　　resText:表示响应回来的数据
　　　　　　}

演示jquery中的$obj.load() 的作用

#演示jquery中的$obj.load() 的作用
url(r'^head/$',views.head_view),
url(r'^index/$',views.index_view),
#----------------------
def head_view(request):
  return render(request, 'hand.html')
# 将index页面的内容加载到head页面中
def index_view(request):
  return render(request, 'index.html')

路由/配置文件

//file:head.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #nav li{
      float:left;
      width:100px;
      height:30px;
      line-height:30px;
      background:red;
      text-align:center;
      color:#fff;
      font-weight:bold;
      font-size:16px;
    }
    #nav{
      list-style:none;
    }
  </style>
</head>
<body>
  <h1>北京欢迎您... ...</h1>
  <ul id="nav">
    <li>首页</li>
    <li>名胜古迹</li>
    <li>美食</li>
    <li>民俗风情</li>
  </ul>
</body>
</html>>

head.html

//file:index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>
    $(function(){

      //加载 /demo/head 页面到#top中
      $("#top").load("/demo/head",function(resText){
        console.log(resText);
        window.setTimeout(function(){
          $("#top").hide(5000);
        },5000);
      });
    })
  </script>
</head>
<body>
  <div id="top"></div>
  <h1>网页主体内容</h1>
  <h1>网页底部内容</h1>
</body>
</html>

index.html

2.$.get()

　　作用:通过get方式异步的向远程地址发送请求

　　语法:$.get(url,data,callback,type)

　　　　1.url:请求地址

　　　　2.data:请求参数[可选]

　　　　　　1.使用字符串

　　　　　　2.使用JS对象

　　　　3.callback:响应成功后的回调函数[可选]

　　　　　　function(resText){

　　　　　　}

　　　　4.type:响应回来的数据的格式[可选]

　　　　　取值如下:

　　　　　　1.html:响应回来的文本当成html文本处理

　　　　　　2.text:响应回来的文本当成普通文本处理

　　　　　　3.script:响应回来的文本当JS脚本执行

　　　　　　4.json:响应回来的文本是JSON格式,会直接转换成JS对象/数组

1.演示jquery中的$.get()的作用

# 演示jquery中的$.get()的作用
url(r'^jq-get/$',views.jq_get_view),
url(r'^server-json-users/$', views.server_json_users_view),
# -------------------------
def jq_get_view(request):
  return render(request, 'jq-get.html')

def server_json_users_view(request):
  users = Users.objects.all()
  jsonusers = serializers.serialize('json', users)
  return HttpResponse(jsonusers)
#-------显示结果-----------
姓名:123
昵称:123
==========================
姓名:11
昵称:11
==========================

路由/视图配置文件

file:jq-get.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#btnShow").click(function(){
        $.get("/demo/server-json-users",function(resText){
          //业务处理,由于type的类型是json所以resText直接当成JS对象去处理
          $(resText).each(function(i,obj){
            console.log("姓名:"+obj.fields.uname);
            console.log("昵称:"+obj.fields.nickname);
            console.log("==========================");
          });
        },'json');
      });
    })
  </script>
</head>
<body>
  <button id="btnShow">显示Users</button>
</body>
</html>

jq-get.html

2.通过$.get()完成搜索建议

# 通过$.get()完成搜索建议
url(r'^search/$', views.search_view),
url(r'^server-search/$', views.server_search_view),
# -------------------------
def search_view(request):
  return render(request, 'search.html')

def server_search_view(request):
  # 1.接收前端传递过来的参数 -kw
  kw = request.GET['kw']
  # 2.查询User数据库中uname列中kw的信息
  users = Users.objects.filter(uname__contains=kw)
  # 3.将uname封装成列表在转换成JSON串相应
  uList = []
  if users:
    for u in users:
      uList.append(u.uname)
  return HttpResponse(json.dumps(uList))

路由/视图配置文件

//file:search.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #main{
      position:relative;
    }
    #show{
      width:300px;
      min-height:150px;
      border:1px solid #000;
      background:#fff;
      position:absolute;
      left:72px;
      top:30px;
      display:none;
    }
  </style>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#uname").keyup(function(){
        //判断文本框的值去掉空格后是否为空,不为空发送ajax请求
        if(this.value.trim().length == 0){
          $("#show").html("");//清空#show里的内容
          $("#show").css("display","none");//隐藏#show
        }else{
          $.get("/demo/server-search","kw="+this.value,function(resText){
            if(resText.length == 0){
              $("#show").html("");//清空#show里的内容
              $("#show").css("display","none");//隐藏#show
            }else{
              //清空原有的内容
              $("#show").html("");
              $(resText).each(function(i,obj){
                $("#show").css("display","block");//显示
                var $p = $("<p>"+obj+"</p>");
                $("#show").append($p);
              });
            }
          },'json');
        }
      });
    })
  </script>
</head>
<body>
  <div id="main">
    用户名称: <input type="text" id="uname">
    <button>搜索</button>
    <!-- 提示框:绝对定位的,相对于main实现位置的摆放 -->
    <div id="show"></div>
  </div>
</body>
</html>

search.html

3.$.post()

　　语法:$.post(url,data,callback,type)

4.$.ajax()

　　作用:自定义所有的ajax参数

　　语法: $.ajax({AJAX的参数对象})

　　AJAX的参数对象:

　　　　1. url : 请求的地址

　　　　2. data : 请求到服务器端的参数

　　　　　　1.字符串 : "key1=value1&key2=value2"

　　　　　　2.JS对象: {key1:"value1",key2:"value2"}

　　　　3.type : 请求方式 'get' 或 'post'

　　　　4.dataType : 响应回来的数据的格式

　　　　　　json,html,text,script

　　　　5.async : 是否采用异步的方式发送请求

　　　　　　true:异步(默认值)

　　　　　　false:同步

　　　　6.success:响应成功后的回调函数

　　　　　　function(resText){

　　　　　　　　resText表示的是响应回来的数据

　　　　　　}

　　　　7.error:请求或响应失败时的回调函数

　　　　　　function(){

　　　　　　}

通过$.ajax() 完成自定义的ajax请求

#通过$.ajax() 完成自定义的ajax请求
url(r'^jq-ajax/$',views.jq_ajax_view),
url(r'^server-json-users/$', views.server_jsonusers),
#--------------------------
def jq_ajax_view(request):
  return render(request,'jq-ajax.html')
def server_json_users(request):
  users = Users.objects.all()
  jsonusers = serializers.serialize('json', users)
  return HttpResponse(jsonusers)
#------------显示结果----------------
用户名:123
邮箱:123
用户名:11
邮箱:11
用户名:11

路由/视图配置文件

//file:jq-ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#btnAjax").click(function(){
        $.ajax({
          url:"/demo/server-json-users",
          type:"get",
          dataType:"json",
          async:true,
          success:function(resText){
            $(resText).each(function(i,obj){
              console.log("用户名:"+obj.fields.uname);
              console.log("邮箱:"+obj.fields.uemail);
            });
          }
        });
      });
    });
  </script>
</head>
<body>
  <button id="btnAjax">使用$.ajax()请求数据</button>
</body>
</html>

jq-ajax.html

posted @ 2019-07-26 08:45 maplethefox 阅读(196) 评论(0) 编辑收藏举报

刷新页面返回顶部

Fine.Thank you,and you!

坚持,在牛逼的梦想,也抵不住傻逼的坚持.

JSON学习笔记

一JSON介绍

二JSO-JS对象

三JSON规范

四前端中处理JSON

五服务器端的JSON处理

六前端中将JS对象转换成JSON串

七服务器端中将JSON串转换为字典/列表

八JQ对AJAX的支持

1.$obj.load()

2.$.get()

3.$.post()

4.$.ajax()

公告