JSON

概念

  • JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言 *
  • JSON 具有自我描述性，更易理解

示例

  • ["one", "two", "three"]
  • { "one": 1, "two": 2, "three": 3 }
  • {"names": ["张三", "李四"] }
  • [ { "name": "张三"}, {"name": "李四"} ]　

格式不正确的示例

  • { name: "张三", 'age': 32 }      // 属性名必须使用双引号
  • [32, 64, 128, 0xFFF]      // 不能使用十六进制值
  • { "name": "张三", "age": undefined }      // 不能使用undefined
  • { "name": "张三","birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),"getName": function() {return this.name;}      // 不能使用函数和日期对象}

相关方法

　　JavaScript中关于JSON对象和字符串转换的两个方法：

    • JSON.parse():                               用于将一个 JSON 字符串转换为 JavaScript 对象　
    • JSON.parse('{"name":"Q1mi"}');
    • JSON.parse('{name:"Q1mi"}') ; // 错误
    • JSON.parse('[18,undefined]') ; // 错误
    • JSON.stringify():                             用于将 JavaScript 值转换为 JSON 字符串。　
    • JSON.stringify({"name":"Q1mi"})

和XML的比较

  • 书写简单
  • 一目了然
  • 可以由解释引擎直接处理
  • 无需另外添加解析代码

AJAX

概念

  • 使用Javascript语言与服务器进行异步交互进行传输的数据的传输
  • 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
  • 无需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
    • 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
    • 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发第二个请求

示例

  1.  // HTML部分代码
  2.  !DOCTYPE html>
  3.  <html lang="en">
  4.  <head>
  5.    <meta charset="UTF-8">
  6.    <meta http-equiv="x-ua-compatible" content="IE=edge">
  7.    <meta name="viewport" content="width=device-width, initial-scale=1">
  8.    <title>AJAX局部刷新实例</title>
  9.  </head>
  10.  <body>
  11.  
  12.  <input type="text" id="i1">+
  13.  <input type="text" id="i2">=
  14.  <input type="text" id="i3">
  15.  <input type="button" value="AJAX提交" id="b1">
  16.  
  17.  <script src="/static/jquery-3.2.1.min.js"></script>
  18.  <script>
  19.    $("#b1").on("click", function () {
  20.      $.ajax({
  21.        url:"/ajax_add/",
  22.        type:"GET",
  23.        data:{
  24.        "i1":$("#i1").val(),
  25.        "i2":$("#i2").val()
  26.        },
  27.        success:function (data) {
  28.          $("#i3").val(data);
  29.        }
  30.      })
  31.    })
  32.  </script>
  33.  </body>
  34.  </html>
  35.  
  36.  # views.py
  37.  def ajax_demo1(request):
  38.      return render(request, "ajax_demo1.html")
  39.  
  40.  def ajax_add(request):
  41.      i1 = int(request.GET.get("i1"))
  42.      i2 = int(request.GET.get("i2"))
  43.      ret = i1 + i2
  44.      return JsonResponse(ret, safe=False)
  45.  
  46.  urls.py
  47.  urlpatterns = [
  48.      ...
  49.      url(r'^ajax_add/', views.ajax_add),
  50.      url(r'^ajax_demo1/', views.ajax_demo1),
  51.      ...
  52.  ]

常见应用情景

搜索引擎根据用户输入的关键字，自动提示检索关键字。

注册时候的用户名的查重

整个过程中页面没有刷新，只是刷新页面中的局部位置

当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应

AJAX的优缺点

　优点：

  • AJAX使用JavaScript技术向服务器发送异步请求；
  • AJAX请求无须刷新整个页面；
  • 因为服务器响应内容不再是整个页面，而是页面中的部分内容,更加专一

　缺点 :

  • 请求杂乱且数量增加,对服务器的压力增加

传统方式 实现 AJAX

common.js

  1. function createXhr(){
  2.     var xhr = null;
  3.     if(window.XMLHttpRequest){
  4.         xhr = new XMLHttpRequest();
  5.     }else{
  6.         xhr = new ActiveXObject("Microsoft.XMLHttp");
  7.     }
  8.     return xhr;
  9. }

01-ajax-get.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <button onclick="btnAjx()">点击发送 ( ajax )</button>
  9. <a href="/01-server">发生 ( 非 ajax )</a>
  10. <div id="show">123</div>
  11.  
  12. <script src="/static/js/common.js"></script>
  13. <script src="/static/js/jquery-1.11.3.js"></script>
  14.  
  15. </body>
  16. </html>
  17.  
  18. <script>
  19.     function btnAjx() {
  20.         // 1.获取 xhr 对象
  21.         var xhr = createXhr();
  22.         // 2.创建请求
  23.         xhr.open('get', '/01-server', true);
  24.         // 3.设置回调函数
  25.         xhr.onreadystatechange = function () {
  26.             // 判断 readyState 以及 status 值
  27.             if (xhr.readyState == 4 && xhr.status == 200) {
  28.                 // 接收响应数据
  29.                 var resT = xhr.responseText;
  30.                 $("#show").html(resT);
  31.             }
  32.         }
  33.         // 4.发送请求
  34.         xhr.send(null);
  35.     }
  36. </script>

app.py

  1. from flask import Flask, render_template
  2.  
  3. app = Flask(__name__)
  4.  
  5. @app.route('/01-ajax-get')
  6. def ajax_get():
  7.     return render_template("01-ajax-get.html")
  8.  
  9. @app.route('/01-server')
  10. def server01():
  11.     return "这是使用 ajax 方式发送的请求"
  12.  
  13. if __name__ == '__main__':
  14.     app.run()

可见较为繁琐. 需要手动写一个 创建方法, 然后ajax 的参数写入也较为麻烦,

回调方法还需要进行自行的状态判断, 此方法了解即可.

jQuery实现的AJAX

语法

settings　　本次ajax请求需要的所有的参数,值为 JS对象

  1. $.ajax(url[,settings]);

常用参数

url 　　字符串,表示异步请求的地址

type 　字符串,表示的是请求方式, get 或 post

data 　传递到服务器端的参数 ( 字符串 / json 对象 )

async　　使用异步还是同步的方式发送请求

  • true : 使用异步的方式
  • false : 使用同步的方式

dataType 　　字符串,表示的是响应回来的数据的格式

  • 'html'
  • 'xml'
  • 'text'
  • 'script'
  • 'json'      响应回来的数据时JSON类型的
  • 'jsonp'    跨域的时候使用
  • success    请求和响应成功后的回调函数

success　　成功拿到数据后的进行的回调函数

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

beforeSend　　 发送请求之前执行的回调函数

　　如果该函数中return false 的话则终止请求的发送

function(data){}　　方法. data 表示回传的数据, 必须配合上面三个来

全部参数

名称 值/描述
async 布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr) 发送请求前运行的函数。
cache 布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
contentType 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
context 为所有 AJAX 相关的回调函数规定 "this" 值。
data 规定要发送到服务器的数据。
dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。
dataType 预期的服务器响应的数据类型。
error(xhr,status,error) 如果请求失败要运行的函数。
global 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp 在一个 jsonp 中重写回调函数的字符串。
jsonpCallback 在一个 jsonp 中规定回调函数的名称。
password 规定在 HTTP 访问认证请求中使用的密码。
processData 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset 规定请求的字符集。
success(result,status,xhr) 当请求成功时运行的函数。
timeout 设置本地的请求超时时间（以毫秒计）。
traditional 布尔值，规定是否使用参数序列化的传统样式。
type 规定请求的类型（GET 或 POST）。
url 规定发送请求的 URL。默认是当前页面。
username 规定在 HTTP 访问认证请求中使用的用户名。
xhr 用于创建 XMLHttpRequest 对象的函数。

实例

HTML

  1. <script>
  2. 　　$("#ajaxTest").click(function () {
  3. 　　　　$.ajax({
  4. 　　　　　　url: "/ajax_test/",
  5.      　　 type: "POST",
  6.      　　 data: {username: "Q1mi", password: 123456},
  7.      　　 success: function (data) {
  8. 　　　　　　　　alert(data)
  9.       }
  10.     })
  11.   })
  12. </script>

 views.py

  1. def ajax_test(request):
  2.     user_name = request.POST.get("username")
  3.     password = request.POST.get("password")
  4.     print(user_name, password)
  5.     return HttpResponse("OK")

urls.py

  1. urlpatterns = [
  2.     ...
  3.     url(r'^ajax_test/', views.ajax_test),
  4.     ...
  5. ]

注意 

  1. $.ajax 参数
  2.     data参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型。
  3.     $("#b1").on("click", function () {
  4.         $.ajax({
  5.           url:"/ajax_add/",
  6.           type:"GET",
  7.           data:{
  8.             "i1":$("#i1").val(),
  9.             "i2":$("#i2").val(),
  10.             "hehe": JSON.stringify([1, 2, 3])},
  11.           success:function (data) {
  12.             $("#i3").val(data);
  13.           }
  14.         })
  15.       })

AJAX请求如何设置csrf_token

form 表单提提交数据必须要带scrfToken,哪怕在ajax里面提交也许带这一字段才可以

方法1

普通的 form 表单的 post 方式提交需要写一个 {% csrf_token %} 会自动生成一个 隐藏的 input 标签

跨域请求的时候需要此标签的的 csrfmiddlewaretoken 值

直接通过 jquery 方式取出此标签中的 csrfmiddlewaretoken 值放在data 中传递即可

  1. $.ajax({
  2.   url: "/cookie_ajax/",
  3.   type: "POST",
  4.   data: {
  5.     "username": "Q1mi",
  6.     "password": 123456,
  7.     "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()  // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中
  8.   },
  9.   success: function (data) {
  10.     console.log(data);
  11.   }
  12. })

方法2

单独写一个CSS文件(my_ajax_csrf.css)里面写下面代码

每次有AJAX 的时候就页面引用一下,其他什么都不用做了.

  1. function getCookie(name) {
  2.     var cookieValue = null;
  3.     if (document.cookie && document.cookie !== '') {
  4.         var cookies = document.cookie.split(';');
  5.         for (var i = 0; i < cookies.length; i++) {
  6.             var cookie = jQuery.trim(cookies[i]);
  7.             // Does this cookie string begin with the name we want?
  8.             if (cookie.substring(0, name.length + 1) === (name + '=')) {
  9.                 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
  10.                 break;
  11.             }
  12.         }
  13.     }
  14.     return cookieValue;
  15. }
  16. var csrftoken = getCookie('csrftoken');

  18. function csrfSafeMethod(method) {
  19.   // these HTTP methods do not require CSRF protection
  20.   return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  21. }
  22.  
  23. $.ajaxSetup({
  24.   beforeSend: function (xhr, settings) {
  25.     if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
  26.       xhr.setRequestHeader("X-CSRFToken", csrftoken);
  27.     }
  28.   }
  29. });

方法3

当向服务器发送一次 post 请求但是并不是通过 form 的方式,  但是只要是 post方式 数据的提交依然是需要 csrf_token

但是不是 form 的方式也么办法在页面中直接加 {% csrf_token %}, 所以也没办法通过{% csrf_token %}生成的隐藏标签来取其值

只能在 ajax 中携带的数据中直接加一个  csrfmiddlewaretoken: '{{csrf_token}}'  也可以实现

  1.     $('.jsDeleteFav_course').on('click', function () {
  2.         var _this = $(this),
  3.             favid = _this.attr('data-favid');
  4.         $.ajax({
  5.             cache: false,
  6.             type: "POST",
  7.             url: "/org/add_fav/",
  8.             data: {
  9.                 fav_type: 1,
  10.                 fav_id: favid,
  11.                 csrfmiddlewaretoken: '{{csrf_token}}'
  12.             },
  13.             async: true,
  14.             success: function (data) {
  15.                 Dml.fun.winReload();
  16.             }
  17.         });
  18.     });

ajax 上传文件

ajax 对于 上传文件 的时候一样 有特殊的操作

需要加两个参数

  • processData: false,
  • contentType: false,

以及

  • data 必须是 FormDate 类型 不能再手动创建一个随意的 data 了

具体示例可见综合示例中的 头像文件上传

AJAX 注册综合示例

  1.  ajax 注册示例
  2.  
  3.  # 注册的视图函数
  4.  def register(request):
  5.      if request.method == "POST":
  6.          ret = {"status": 0, "msg": ""}
  7.          form_obj = forms.RegForm(request.POST)
  8.          print(request.POST)
  9.          # 帮我做校验
  10.          if form_obj.is_valid():
  11.              # 校验通过，去数据库创建一个新的用户
  12.              # 传过来的字段里面有个 re_password 字段是无法入库的给去掉
  13.                  # 关于这个 cleaned_data 的功能为提取出来字典里面的值
  14.              form_obj.cleaned_data.pop("re_password")
  15.              avatar_img = request.FILES.get("avatar")
  16.              # 因为现在的userinfo
  17.              models.UserInfo.objects.create_user(**form_obj.cleaned_data, avatar=avatar_img)
  18.              ret["msg"] = "/index/"
  19.              return JsonResponse(ret)
  20.          else:
  21.              print(form_obj.errors)
  22.              ret["status"] = 1
  23.              ret["msg"] = form_obj.errors
  24.              print(ret)
  25.              print("=" * 120)
  26.              return JsonResponse(ret)
  27.      # 生成一个form对象
  28.      form_obj = forms.RegForm()
  29.      print(form_obj.fields)
  30.      return render(request, "register.html", {"form_obj": form_obj})
  31.  
  32.  // AJAX提交注册的数据
  33.  <script>
  34.   $("#reg-submit").click(function () {
  35.          // 取到用户填写的注册数据，向后端发送AJAX请求
  36.          var formData = new FormData();
  37.          formData.append("username", $("#id_username").val());
  38.          formData.append("password", $("#id_password").val());
  39.          formData.append("re_password", $("#id_re_password").val());
  40.          formData.append("email", $("#id_email").val());
  41.          // 上传文件的数据需要用 files 拿到
  42.          formData.append("avatar", $("#id_avatar")[0].files[0]);
  43.          formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
  44.  
  45.          $.ajax({
  46.              url: "/reg/",
  47.              type: "post",
  48.              // 上传文件的时候需要加这两个 fales
  49.              processData: false,
  50.              contentType: false,
  51.              data: formData,
  52.              success:function (data) {
  53.                  if (data.status){
  54.                      // 有错误就展示错误
  55.                      // console.log(data.msg);
  56.                      // 将报错信息填写到页面上
  57.                      $.each(data.msg, function (k,v) {
  58.                          // console.log("id_"+k, v[0]);
  59.                          // console.log($("#id_"+k));
  60.                          // 链式操作 先加值然后找父类 加属性
  61.                          $("#id_"+k).next("span").text(v[0]).parent().parent().addClass("has-error");
  62.                      })
  63.  
  64.                  }else {
  65.                      // 没有错误就跳转到指定页面
  66.                      location.href = data.msg;
  67.                  }
  68.              }
  69.          })
  70.      });
  71.  
  72.          // 将所有的input框绑定获取焦点的事件，将所有的错误信息清空
  73.      $("form input").focus(function () {
  74.          $(this).next().text("").parent().parent().removeClass("has-error");
  75.      })
  76.  
  77.  </script>

序列化

　　Django内置的serializers

　　　　可以更加便携进行序列化,当然可以用 json 模块完成

　　　　待补充 这个方法是内置的比较粗糙的,实际上很少被使用.

  1.  from django.core import serializers
  2.  
  3.  def books_json(request):
  4.  　　book_list = models.Book.objects.all()[0:10]
  5.  
  6.  　　ret = serializers.serialize("json", book_list)    # 第一个参数为转换的格式,后一个参数为被转换的变量
  7.  　　return HttpResponse(ret)

Django JSON，AJAX的更多相关文章

  1. uploadify ，前端页面获取值，json，ajax

    针对这几月的技术,做一次小总结 上传控件uploadify function inexel() { $("#btnExcel").uploadify({ 'method': 'po ...

  2. java：（json，ajax，path，Oracle的分页实例，Filter拦截器）

    1.json: <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...

  3. Python Django缓存，信号，序列化，文件上传，Ajax登录和csrf_token验证

    本节内容 models操作 Django的缓存 请求方式 序列化 Form 配合Ajax实现登录认证 上传文件 Ajax  csrf_token验证方式 1 models操作 单表查询: curd(增 ...

  4. django设置并获取cookie/session，文件上传，ajax接收文件，post/get请求及跨域请求等的方法

    django设置并获取cookie/session,文件上传,ajax接收文件等的方法: views.py文件: from django.shortcuts import render,HttpRes ...

  5. 还在用Json完成Ajax，改用Beetl吧

    原文链接:https://blog.csdn.net/xiandafu/article/details/44216905 作者:Beetl作者,闲大赋 浏览器通过AJAX,服务器返回json数据,无刷 ...

  6. Jackson 转换JSON，SpringMVC ajax 输出，当值为null或者空不输出字段@JsonInclude

    当我们提供接口的时候, Ajax 返回的时候,当对象在转换 JSON (序列化)的时候,值为null或者为“” 的字段还是输出来了.看上去不优雅. 现在我叙述三种方式来控制这种情况. 注解的方式( @ ...

  7. Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别

    为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不 ...

  8. 什么是Ajax和JSON，它们的优缺点

    什么是Ajax??? 术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验. Ajax它是“Asynchronous JavaScript + XML的简写” 定义Ajax: Aj ...

  9. AJAX发送json，SpringMVC 接收JSON，@RequestBody

    需求:JQuery ajax前台,采用 POST请求 发送json,后台使用SpringMVC接收json并处理 前台: $.ajax({ url:"请求地址", type:&qu ...

随机推荐

  1. Delphi中打开网页连接的几种方法

    https://blog.csdn.net/zisongjia/article/details/69398143 正好要用,做个记录.Mark下. 使用了第一种 uses shellapi proce ...

  2. 使用VBScript 脚本 开机播放声音

    前言:环境Window 10 第一步写一个 VBScript 脚本 新建一个文本文档,将下面的代码复制到文本文档中,Ctrl+S保存 将文本文档的.txt 后缀 改为.vbs即可 最后,双击这个 vb ...

  3. Redis持久化的方式

    Redis小知识: redis是键值对的数据库,有5中主要数据类型: 字符串类型(string),散列类型(hash),列表类型(list),集合类型(set),有序集合类型(zset) Redis持 ...

  4. XPath Helper的安装与使用

    摘要 : XPath Helper可以支持在网页点击元素生成xpath,整个抓取使用了xpath.正则表达式.消息中间件.多线程调度框架的chrome插件. xpath:是一门XML和HTML文档中查 ...

  5. 【原】无脑操作：eclipse创建maven工程时，如何修改默认JDK版本？

    问题描述:eclipse建立maven项目时,JDK版本默认是1.5,想创建时默认版本设置为1.8,如何修改? 解决方案: 找到本机maven仓库存放位置,比如:${user.home}/.m2/路径 ...

  6. win10 系统 wifi自动断开连接 wifi热点不稳定

    我的系统的电脑是win10系统,笔记本 下载了一个wifi共享大师,但是wifi总是自动断,于是就找了找问题所在 在网上看了许多方案,大多数都是    在   电源管理  把[允许计算机关闭此设备以节 ...

  7. hadoop 分析

    Hadoop源代码分析(一) Google的核心竞争技术是它的计算平台.Google的大牛们用了下面5篇文章,介绍了它们的计算设施. GoogleCluster:http://research.goo ...

  8. XML详解一XML语法

    XML指可扩展标记语言很类似 HTML,被设计用来传输和存储数据而非显示数据,XML标签没有被预定义需要自行定义标签,标签具有自我描述性,同时XML也是 W3C 的推荐标准. 先来写一个XML脚本de ...

  9. Centos7.5 部署postfix邮件系统

    1. Postfix 1.1 邮件服务的介绍 电子邮件是—种用电子手段提供信息交换的通信方式,是互联网应用最广的服务.通过网络的电子邮件系统,用户可以以非常低廉的价格(不管发送到哪里,都只需负担网费) ...

  10. Python 位操作运算符

    & 按位与运算符:参与运算的两个值,如果两个相应位都为1,则该位的结果为1,否则为0 (a & b) 输出结果 12 ,二进制解释: 0000 1100 | 按位或运算符:只要对应的二 ...