JsonResponse

JsonResponse继承自HttpResponse，被定义在django.http模块中
- 接收字典作为参数
使用场景：当需要响应json数据给请求者时，需要用到JsonResponse
JsonResponse的content-type默认为application/json
- 也就是说JsonResponse响应的内容格式默认是json的
案例：使用ajax实现网页局部刷新时就需要使用JsonResponse响应json数据

需求展示

需求实现

1.准备URLconf，视图，模板
2.导入 jquery 静态文件
3.发起ajax请求
4.响应json字典
5.处理json字典，构造html内容

1. 准备URLconf，视图，模板

  # ajax请求
  url(r'^ajax/$', views.ajax),

  # ajax请求
  def ajax(request):
      return render(request, 'Book/ajax.html')

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>ajax</title>

  </head>
  <body>

      <input id="ajaxbtn" type="button" value="ajax_request">

      <ul>
          <li>鹅鹅鹅</li>
          <li>曲项向天歌</li>
          <li>白毛浮绿水</li>
          <li>红掌拨清波</li>
      </ul>

      <ul id="test" style="background: red;width: 100px;height: 100px;">
          <li>床前明月光</li>
          <li>地上鞋两双</li>
          <li>举头望明月</li>
          <li>低头思故乡</li>
      </ul>

  </body>
  </html>

2. 导入 jquery 静态文件

  <head>
      <meta charset="UTF-8">
      <title>ajax</title>

      {#导入jquery#}
      <script src="/static/js/jquery-1.12.4.min.js"></script>

  </head>

加载 jquery 静态文件失败

配置静态文件加载路径

  # 配置静态文件加载路径
  STATIC_URL = '/static/'
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, 'static'),
  ]

加载 jquery 静态文件成功

3. 发起ajax请求

  {#ajax请求json数据#}
  <script>

      // DOM加载完再操作DOM
      $(function () {
          // 获取ajaxbtn按钮点击事件
          $('#ajaxbtn').click(function () {
              // ajax请求,参数1：请求地址；参数2：请求回调，jsondict表示请求回来的字典
              $.get('/jsondata/', function (jsondict) {
                  alert("收到响应了吗？");
              });
          });
      });

  </script>

4. 响应json字典

准备模型类

  from django.db import models

  # 书籍信息模型
  class BookInfo(models.Model):
      name = models.CharField(max_length=20) #图书名称
      pub_date = models.DateField(null=True) #发布日期
      readcount = models.IntegerField(default=0) #阅读量
      commentcount = models.IntegerField(default=0) #评论量
      isDelete = models.BooleanField(default=False) #逻辑删除

      # 元类信息 : 修改表名
      class Meta:
          db_table = 'bookinfo'

构造json字典分析

  '''
  原始：bookInfos = [book0,book1,book2,book3]
  结果：jsondict = {"booklist":[{"name":"射雕英雄传"},{"name":"神雕侠侣"},{"name":"天龙八部"},{"name":"雪山飞狐"}]}
  '''

构造json字典实现

# 响应json
def jsondata(request):
  # 查询数据库书籍列表信息
  bookInfos = BookInfo.objects.all()

  # 构造书籍字典列表
  list = []
  for book in bookInfos:
      list.append({"name":book.name})

  # 构造json字典
  jsondict = {"booklist":list}

  return JsonResponse(jsondict)

5. 处理json字典，构造html内容

  {#ajax请求json数据#}
  <script>

      // DOM加载完再操作DOM
      $(function () {
          // 获取ajaxbtn按钮点击事件
          $('#ajaxbtn').click(function () {
              // ajax请求,参数1：请求地址；参数2：请求回调，jsondict表示请求回来的字典
              $.get('/jsondata/', function (jsondict) {
                  // 删除id="test"的ul里面的li
                  $('#test li').remove();
                  // 获取jsondict字典里面的书籍列表信息
                  booklist = jsondict.booklist;
                  // 获取id="test"的ul
                  test_ul = $('#test');
                  // 遍历书籍列表信息，拼接li
                  $.each(booklist, function (i, book) {
                      test_ul.append('<li>'+book.name+'</li>');
                  });
              });
          });
      });

  </script>