一、Ajax准备知识:json
说起json,我们大家都了解,就是python中的json模块,那么json模块具体是什么呢?那我们现在详细的来说明一下
1、json(Javascript Obiect Notation,JS对象标记)是一种轻量级的数据交换格式。
它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率
2、json其实是从js中拿出来的一个对象,也可以说json是js的一个子集。
需要知道的:json的格式来源于js的格式
1、js支持单引号,也支持双引号,也可以没有引号
//在js中吧{}这样的类型叫做对象,js中没有字典一说 data = { 'name':'haiyan', "name":"haiyan", name:"haiyan" } //js对象默认会把自己的键当成字符串处理,所以可以加引号也可以不加
2、json的格式:
1、json只认双引号的 2、json一定是一个字符串 因为你的字典形式的type也是str类型的
3、下面我们看看哪些是合格的字符串,那些不是?
合格的json对象:
1 ["one", "two", "three"] 2 3 { "one": 1, "two": 2, "three": 3 } 4 5 {"names": ["张三", "李四"] } 6 7 [ { "name": "张三"}, {"name": "李四"} ]
1 { name: "张三", 'age': 32 } // 属性名必须使用双引号 2 3 [32, 64, 128, 0xFFF] // 不能使用十六进制值 4 5 { "name": "张三", "age": undefined } // 不能使用undefined 6 7 { "name": "张三", 8 "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'), 9 "getName": function() {return this.name;} // 不能使用函数和日期对象 10 }
其实json就是把你的 内容转化为字符串然后进行网络之间的信息传播 因为网络之间的传递只能传播字符串 并且json可以用于语言之间的内容传递 因为json不仅仅是某一种语言的 它支持很多语言比如你的java想要和我的python发送信息交互就需要json来进行交互
什么是Ajax?
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据)。
1、简单介绍
我们以前知道的前端向后端发送数据的方式有:
GET:地址栏、a标签、Form表单
POST:Form表单
那么现在我们在学习一种:那就是ajax
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
- 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
- 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
Ajax的特点:
异步交互: 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!(不需要等待你的上面的完成才能执行下面的内容)
局部刷新: 整个过程中页面没有刷新,只是刷新页面中的局部位置而已!(不用再此刷新你的的全局的页面 )
ajax:也是前端向后端发送数据的一种方式
<title>Document</title> <script src = 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js'></script> </head> <body> <button class="btn">click</button> <script> $('.btn').click(function(){ $.ajax({ {##} url:'/nice/', {#你接下来要请求的路径#} type:'get', {#请求的类型 是get还是post#} success:function(data){ {#这个是请求完成之后执行的回掉函数 然后data是你接受完成后传递回来的内容 就是形参 #} console.log(data) } }) }) </script> </body>
urls: from django.contrib import admin from django.urls import path from first import views urlpatterns = [ path('admin/', admin.site.urls), path('index/',views.index), path('nice/',views.nice) ] views: from django.shortcuts import render,HttpResponse # Create your views here. def index(request): return render(request,'index.html') def nice(request): return HttpResponse('6666') index: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src = 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js'></script> </head> <body> <button class="btn">click</button> <p class="con"></p> <script> $('.btn').click(function(){ $.ajax({ {##} url:'/nice/', {#你接下来要请求的路径#} type:'get', {#请求的类型 是get还是post#} success:function(data){ {#这个是请求完成之后执行的回掉函数 然后data是你接受完成后传递回来的内容 就是形参 #} console.log(data); $('.con').html(data).css('color','red'); {#z=这一步是把你的接受过来的内容给传递进你的p标签内#} } }) }) </script> </body> </html>