Ajax 准备的知识: JSON
JSON 指的是 JavaScript 对象表示法, 也是轻量级的文本数据交换的格式
并且独立于语言, 具有自我描述性, 更易理解.
注意: JSON 使用 JavaScript 语法来描述数据对象, 但是 JSON 仍然独立于语言和平台. JSON 解析器和 JSON 库支持许多不同的编程语言.
python 与 JS 之间用 JSON 数据之间的转换:
合格的 JSON 格式的对象:
- ["one", "two", "three"]
- {
- "one": 1, "two": 2, "three": 3
- }
- {
- "names": ["张三", "李四"]
- }
- [ {
- "name": "张三"
- }, {
- "name": "李四"
- } ]
不合格的 JSON 格式的对象:
{ name: "张三", 'age': 32 } ,{ "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;} // 不能使用函数和日期对象
- }
xml 和 JSON 都使用结构化方法来标记数据, 只不过 JSON 格式有两个显著的优点: 1. 书写简单, 一目了然;
2. 符合 JavaScript 原生语法, 可以由解释引擎直接处理, 不用另外添加解析代码.
Ajax 的介绍
Ajax(Asynchronous JavaScript And xml)翻译成中文就是 "异步的 Javascript 和 XML". 即使用 JavaScript 语言与服务器进行异步交互, 传输的数据为 xml(当然, 传输的数据不只是 xml).
Ajax 不是新的编程语言, 而是一种使用现有标准的新方法.
Ajax 最大的优点是在不重新加载整个页面的情况下, 可以与服务器交换数据并更新部分网页内容.(这一特点给用户的感受是在不知不觉中完成请求和响应过程, 即局部的刷新)
Ajax 不需要任何浏览器插件, 但需要用户允许 JavaScript 在浏览器上执行.
同步交互: 客户端发出一个请求后, 需要等待服务器响应结束后, 才能发出第二个请求;
异步交互: 客户端发出一个请求后, 无需等待服务器响应结束, 就可以发出第二个请求.
Ajax 的应用场景:
我们前端往后端发请求的方式:
1. 直接在地址栏输入 URL
2. a 标签
3. form 表单
4. Ajax
HTTP 请求的类型:
GET
POST
Ajax 特点:
1. 异步
2. 局部刷新(偷偷发请求)
Ajax 缺点:
请求零碎, 滥用对服务端压力大
用 jQuery 封装的 Ajax 方法:
- $("#b1").on("click", function () {
- // 点击 id 是 b1 的按钮要做的事儿
- var i1 = $("#t1").val();
- var i2 = $("#t2").val();
- // 往后端发数据
- $.Ajax({
- url: "/ajax_demo/",
- type: "get",
- data: {"t1": i1, "t2": i2},
- success: function (arg) {
- {#alert(arg);#}
- // 把返回的结果填充到 id 是 i3 的 input 框中
- $("#t3").val(arg);
- }
- })
- });
$.Ajax 的参数:
data 参数中的键值对, 如果值值不为字符串, 需要将其转换成字符串类型. 用 JSON 将数据类型转变为字符串传递给后端.
- $("#b1").on("click", function () {
- $.Ajax({
- url:"/ajax_add/",
- type:"GET",
- datatype:"json"
- data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
- success:function (data) {
- $("#i3").val(data);
- }
- })
- })
datatype: "josn", 是帮你把数据封装为 JSON 格式的字符串, 然后传递给视图函数;
JsonResponse 多了一个请求头:'content_type'
: 视图函数返回的数据转为 JSON 字符串, 只是在 Ajax 接收函数返回的数据的时候自己帮你反序列为 object 对象了;
而 HttpResponse 也是将视图函数返回的数据转为 JSON 字符串, 但是在 Ajax 接收函数返回的数据的时候需要自己反序列化(JSON.parse)
- from django.http import JsonResponse
- user = auth.authenticate(username=username, password=pwd)
- if user:
- # 用户名密码正确
- # 给用户做登录
- auth.login(request, user)
- ret["msg"] = "/index/"
- else:
- # 用户名密码错误
- ret["status"] = 1
- ret["msg"] = "用户名或密码错误!"
- else:
- ret["status"] = 1
- ret["msg"] = "验证码错误"
- return JsonResponse(ret)
html 中:
- $.Ajax({
- url: "/login/", // 进行二次验证
- type: "post",
- dataType: "json",
- data: {
- username: $('#inputName3').val(),
- password: $('#inputPassword3').val(),
- geetest_challenge: validate.geetest_challenge,
- geetest_validate: validate.geetest_validate,
- geetest_seccode: validate.geetest_seccode
- },
- success: function (data) {
- if (data.status) {
- $(".login-error").text(data.msg)
- } else {
- location.href = data.msg
- }
- }
- });
Ajax 请求如何设置 csrf_token
第一种是通过获取隐藏的 input 标签中的 csrfmiddlewaretoken 值, 放置在 data 中发送.
- {% csrf_token %}
- <script>
- $.Ajax({
- url: "/cookie_ajax/",
- type: "POST",
- data: {
- "username": "Q1mi",
- "password": 123456,
- "csrfmiddlewaretoken": $("[name ='csrfmiddlewaretoken']").val() // 使用 jQuery 取出 csrfmiddlewaretoken 的值, 拼接到 data 中
- },
- success: function (data) {
- console.log(data);
- }
- })
- </script>
第二种是自己写插件, 把通过获取返回的 cookie 中的字符串 放置在请求头中发送.
只需要导入 JS 即可以.
- function getCookie(name) {
- var cookieValue = null;
- if (document.cookie && document.cookie !== '') {
- var cookies = document.cookie.split(';');
- for (var i = 0; i <cookies.length; i++) {
- var cookie = jQuery.trim(cookies[i]);
- // Does this cookie string begin with the name we want?
- if (cookie.substring(0, name.length + 1) === (name + '=')) {
- cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
- break;
- }
- }
- }
- return cookieValue;
- }
- var csrftoken = getCookie('csrftoken');
- function csrfSafeMethod(method) {
- // these HTTP methods do not require CSRF protection
- return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
- }
- $.ajaxSetup({
- beforeSend: function (xhr, settings) {
- if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
- xhr.setRequestHeader("X-CSRFToken", csrftoken);
- }
- }
- });
Ajax 的请求的参数
######################------------data---------################
data: 当前 Ajax 请求要携带的数据, 是一个 JSON 的 object 对象, Ajax 方法就会默认地把它编码成某种格式
(urlencoded:?a=1&b=2)发送给服务端; 此外, Ajax 默认以 get 方式发送请求.
- function testData() {
- $.Ajax("/test",{ // 此时的 data 是一个 JSON 形式的对象
- data:{
- a:1,
- b:2
- }
- }); //?a=1&b=2
- ######################------------processData---------################
processData(默认的): 声明当前的 data 数据是否进行转码或预处理, 默认为 true, 即预处理; if 为 false,
那么对 data:{a:1,b:2}会调用 JSON 对象的 toString()方法, 即{a:1,b:2}.toString()
, 最后得到一个[object,Object]形式的结果.
######################------------contentType---------################
contentType: 默认值: "application/x-www-form-urlencoded". 发送信息至服务器时内容编码类型.
用来指明当前请求的数据编码格式; urlencoded:?a=1&b=2; 如果想以其他方式提交数据,
比如 contentType:"application/json", 即向服务器发送一个 JSON 字符串:
- $.Ajax("/ajax_get",{
- data:JSON.stringify({
- a:22,
- b:33
- }),
- contentType:"application/json",
- type:"POST",
- }); //{a: 22, b: 33}
注意: contentType:"application/json" 一旦设定, data 必须是 JSON 字符串, 不能是 JSON 对象
- views.py: JSON.loads(request.body.decode("utf8"))
- ######################------------traditional---------################
traditional: 一般是我们的 data 数据有数组时会用到 :data:{a:22,b:33,c:["x","y"]},
traditional 为 false 会对数据进行深层次迭代;
request.body 是前端传过来的数据.
如果是 contentType:"application/json" 的类型的, 取数据要从 request.body 取. request.body=b'{"name":"a"}'.
JSON.loads(request.body.decode("utf8"))
如果是默认的 processData, 则 request.body 为 b'name=a', 默认的帮你把数据按照键值对的形式封装到 request.POST 里面.
name = request.POST.get("name")
- // 上传文件示例
- $("#b3").click(function () {
- var formData = new FormData();
- formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
- formData.append("f1", $("#f1")[0].files[0]);
- $.Ajax({
- url: "/upload/",
- type: "POST",
- processData: false, // 告诉 jQuery 不要去处理发送的数据
- contentType: false, // 告诉 jQuery 不要去设置 Content-Type 请求头
- data: formData,
- success:function (data) {
- console.log(data)
- }
- })
- })
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <script src="http://code.jquery.com/jquery-latest.js">
- </script>
- </head>
- <body>
- <button>
- Ajax
- </button>
- {% csrf_token %}
- <script>
- $("button").click(function() {
- $.Ajax({
- url: "http://127.0.0.1:7766/SendAjax/",
- type: "POST",
- data: {
- "username": "yuan",
- "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val()
- },
- success: function(data) {
- alert(123);
- alert(data)
- }
- })
- })
- </script>
- </body>
- </HTML>
- def index(request):
- return render(request,"index.html")
- def Ajax(request):
- import JSON
- print(request.POST,"+++++++++++")
- return HttpResponse(JSON.dumps("hello"))
- def books(request): #基于 JSONP
- funcname = request.GET.get("callbacks")
- data = {"name":"alex","age":32}
- return HttpResponse("%s('%s')"%(funcname,JSON.dumps(data)))
- <script>
- function alex(arg){
- console.log(arg)
- }
- </script>
- $(".btn").on("click", function () {
- $.Ajax({
- url: "http://127.0.0.1:8008/books/",
- type: "get",
- dataType: "jsonp", // 伪造的 Ajax , 跨域请求, 但是本质上还是基于 script 上面的原理;
- JSONP: "callbacks", //k 值 , v 值 (函数名) 一般不写, 是随机的生成的, 即函数名不用自己取;
- //jsonpCallback:"V 值",
- success: function (arg) { // 就相当于上面的函数, arg 就是跨域得到的数据.
- var data = JSON.parse(arg); // 反序列化 #}
- console.log(typeof data);
- console.log(data)
- }
- }
- )
- })
- import JSON
- # def books(request): #基于 JSONP
- # funcname = request.GET.get("callbacks")
- # data = {
- "name":"alex","age":32
- }
- # return HttpResponse("%s('%s')"%(funcname,JSON.dumps(data)))
- //8000 端口的
- // 基于 cors 实现跨域请求
- $.Ajax({
- url: "http://127.0.0.1:8008/books/",
- type: "get",
- success: function (arg) {
- console.log(arg)
- }
- })
- ;
- def books(request): # 基于 cors 实现跨域请求
- data = {"name":"alex","age":32}
- response = HttpResponse(JSON.dumps(data))
- # response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000"#(访问的地址) #加到 cors 头上, 即当时这个域名访问的时候就可以拿数据了
- response["Access-Control-Allow-Origin"] = "*" #所有的域名访问都可以
- return response
- $(".btn-danger").on("click", function () {
- swal({
- title: "你确定要删除吗?",
- text: "删除可就找不回来了哦!",
- type: "warning",
- showCancelButton: true,
- confirmButtonClass: "btn-danger",
- confirmButtonText: "删除",
- cancelButtonText: "取消",
- closeOnConfirm: false
- },
- function () {
- var deleteId = $(this).parent().parent().attr("data_id");
- $.Ajax({
- url: "/delete_book/",
- type: "post",
- data: {"id": deleteId},
- success: function (data) {
- if (data.status === 1) {
- swal("删除成功!", "你可以准备跑路了!", "success");
- } else {
- swal("删除失败", "你可以再尝试一下!", "error")
- }
- }
- })
- });
- })
- Ajax
来源: http://www.bubuko.com/infodetail-3101532.html