一、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来进行交互

 

python中的json模块使用

python:    json.dumps()   序列化后加上ensure_ascii = False 可以组织你的接收方再接受的时候不会乱码    json.loads()  反序列化

 

js中的json序列化使用

Js:   JSON.stringfy()  js的序列化   JSON.parse()    js的反序列化

 

 

 

什么是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：也是前端向后端发送数据的一种方式

 

    click

 

 

urls:from django.contrib import adminfrom django.urls import pathfrom first import viewsurlpatterns = [    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:    
          
          
              click

 

 

我们生活中很多这样的例子

1、用ajax做一个简单的加法计算器

views:def index(request):    return render(request,'veri.html')def count(request):    if request.method =='POST':        n = request.POST.get('n')        m = request.POST.get('m')        ret = int(n)+int(m)    return HttpResponse(str(ret))前端界面：+=提交   $('.cal').click(function(){        $.ajax({            url:'/count/',            type:'post',            data:{                n:$('#n1').val(),                m:$('#n2').val(),                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),                {
    #得到你的csrftoken的方法后 你要把你的这个请求告诉你的http以防止它拦截后你就要把csrf_token的内容给传递过去 它也是一个input的所以用属性选择器 然后val就可以得到内容#}            },            success:function(data){                $('#n3').val(data).css('color','red');    {
   #val不仅仅是对input进行获取值 还是对input进行值的设置#}                {
   #用val获取值的时候只可以有三个标签 input select textarea这三个标签可以是设置值  #}            }            })        })

 

 

你的json在我们的以后编程中会大量使用因为会牵扯到两种不同的编程语言的程序之间的文件的传递

防止浏览器阻挡你的css的渲染

在你的input标签在和form然后搭配ajax使用的时候就需要为了使用你的css的渲染你不用注释掉你的settings内的yufa也可以只需要在写完了{%csrf_token%}之后在ajax发送请求的时候进行发送一组语法就不会阻挡了

csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()

csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),{#得到你的csrftoken的方法后 你要把你的这个请求告诉你的http以防止它拦截后你就要把csrf_token的内容给传递过去 它也是一个input的所以用属性选择器 然后val就可以得到内容#}

 

下面来实现一个简单的你注册的时候然后还没有刷新页面的时候就提示你的 用户名或者密码已经存在就是用了ajax在不刷新页面的时候进行请求页面

views:

现在urls中输入indel然后请求views中的index函数然后在通过index进行设置

def index(request):     return render(request,'veri.html')

def three(request):    user = request.POST.get('user')    pwd = request.POST.get('pwd')    ret = User.objects.filter(name=user,pwd=pwd).first()    #定义一个字典 把你的得到的信息放到字典内 然后 通过json传送过去    result = {
   'name':None,'mesg':None}  #当你得到信息后就把你的信息放置在这个字典中    if ret:        result['name'] = ret.name    else:        result['mesg'] = '您输入的帐户名或密码不一致'    return HttpResponse(json.dumps(result,ensure_ascii = False))  #把你的赋值后的字典转化为字符串给传递过去  ensure_ascill = False 是因为这个dumps是你的python中的信息你传递给前端很可能他们不会认识 所以这一步是防止你打印的都是乱码看不懂就给你传化为你的语言能识别的内容

 

html中的界面：

     
          {
    % csrf_token %}    用户名： 
          密码： 
          
      
      
     

$('.error').text('')                    },1000)                }            }        })    })

 

 

指定发送的类型：

 

编码类型：

contentType: "application/x-www-form-urlencoded " 默认的类型contentType:"application/json",   这个是用来发送json文件中的时候进行的设置enctype="multipart/form-data"   这个编码用来上传文件 一般用于form表单中

 

我们在一般发送中都是发送的字符串 那么我们也可以指定发送的类型比如告诉我的htpp协议 我要发送的是json类型的内容

我们字符串在ajax的请求的时候默认发送的是字符串类型的内容  因为我们的data中的我们发送的内容有个属性默认的，

contentType 默认为application/x-www-form-urlencoded   这个是代表发送的就是字符串

如果我们想要发送json类型的数据只需要修改contentType:"application/json", 就可以了

 

submit

 

 

 

def verify_one(request):    # print(type(request))    # print('body',request.body)    # print("POST",request.POST)    data = json.loads(request.body.decode('utf8'))  #因为发送不过来的是json类型的内容 并且json类型的是放在了request.body中 而默认的urlascill是放在了POST中  所以我们就从body中查找我们需要的信息 然后是json类型的 需要进行转码    # print(data)    # print(data['a'])    return HttpResponse('ok')

 

改变发送文件的类型：

 

发送文件图片的时候需要改变form的类型（因为一般都是from表单提示你选择哪个文件）

enctype="multipart/form-data"

 

上传一个文件的时候你需要在你选择的form表单中选择你的内容 然后发送的时候选哟告诉你的http协议你发送的是文件或者图片

只需要在form中加入一个

enctype="multipart/form-data"  属性就可以

这样就告诉你的http你接下来将要发送的是文件了

 

你发送过去后，后端接收的内容不是从POST或者body中接收内容了 是从FILES中接收文件了

 

 

html：

 

views:

def file_put(request):    if request.method == 'POST':        print(request.POST)     #这个时候你提交的是一个文件不存在于POST中
     
              print(request.FILES)  #前端提交的文件会依靠FILES来传递给后端        obj_file = request.FILES.get('img')  # 接收这个文件        print('name',obj_file.name)  #打印这个文件的名字        with open('static/img/'+obj_file.name ,'wb')as f:   # 将你的接收的文件和以前的文件的名字一样获取这个文件的名字存放起来            for line in obj_file:                f.write(line)        return HttpResponse('OK')    return render(request,'file_put.html')
     

 

 

发送时你的内容放在的部位：

正常发送（字符串类型）：放在了POST中  request.POST就可以取到发送json数据是  从body中取数据  request.body取数据当文件或者图片的时候从FILES中取数据   request.FILES中取