Django框架（十二）-- Djang与Ajax

一、什么是Ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

  • 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
  • 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

二、Ajax的特点

1、异步

客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求

2、局部刷新

例如：

邮箱没写，会局部刷新邮箱区域，判断邮箱

三、Ajax优点

  • AJAX使用 Javascript 技术向服务器发送异步请求
  • AJAX无须刷新整个页面

四、 基于jquery的Ajax使用

1、基本语法

// 在templates模板层使用
$.ajax({
    url:‘/index/‘,
    type:‘post‘,
    //data:往后台提交的数据
    data:{‘name‘:‘lqz‘,‘age‘:18},
    //成功的时候回调这个函数
    success:function (data) {
        alert(data)
    }
})

2、完整使用语法

<!-- 先导入jQuery -->
<script src="/static/jquery-3.3.1.js"> </script>
<button class="send_Ajax">send_Ajax</button>
<script>

       $(".send_Ajax").click(function(){

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"Yuan",password:123},
               success:function(data){
                   console.log(data)
               },
         　　　　　　
               error: function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    },

               complete: function (jqXHR, textStatus) {
                        console.log(textStatus);
                },

               statusCode: {
                    ‘403‘: function (jqXHR, textStatus, err) {
                          console.log(arguments);
                     },

                    ‘400‘: function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    }
                }

           })

       })

</script>

3、利用ajax提交表单中的数据

<p><input type="text" name="add1" id="add1">+<input type="text" name="add2" id="add2">=<input type="text" name="sum" id="sum"></p>
<button class="btn">点我</button>

<script>
    $(‘.btn‘).click(function(){
        $.ajax({
            url:‘add‘,
            type:‘post‘,
            // 通过 .val() 获取值
            data:{‘add1‘:$(‘#add1‘).val(),‘add2‘:$(‘#add2‘).val},
            success:function(data){
                // 将数据写在val(data)中，可以赋值
                $(‘#sum‘).val(data)
                location.href=‘/index/‘
            }
        })
    })
</script>

五、Ajax的执行流程

六、基于ajax进行文件上传

1、请求头ContentType

（1）application/x-www-form-urlencoded方式

这是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。

（2）multipart/form-data方式

这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 <form> 表单的 enctype 等于 multipart/form-data

上面提到的这两种 POST 数据的方式，都是浏览器原生支持的，而且现阶段标准中原生 <form> 表单也只支持这两种方式（通过 <form> 元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain，不过用得非常少）。

（3）application/json方式

现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

2、基于Form表单上传文件

（1）模板层

<!-- 必须指定 enctype="multipart/form-data" -->
<form action="/files/" method="post" enctype="multipart/form-data">
    <p>用户名:<input type="text" name="name" id="name"></p>
    <!-- 必须指定type="file" -->
    <p><input type="file" name="myfile" id="myfile"></p>
    <input type="submit" value="提交">
</form>
<button id="btn">ajax提交文件</button>

<script>
    $("#btn").click(function () {
        // 上传文件,必须用FormData
        var formdata=new FormData();
        formdata.append(‘name‘,$("#name").val());
        // 取出文件$("#myfile")[0].files拿到的是文件列表,取第0个把具体的文件取出来
        formdata.append(‘myfile‘,$("#myfile")[0].files[0]);

        $.ajax({
            url:‘/files_ajax/‘,
            type:‘post‘,
            // 告诉jQuery不要去处理发送的数据,(name=lqz&age=18)
            processData:false,
            // 指定往后台传数据的编码格式(urlencoded,formdata,json)
            // 现在用formdata对象处理了,就不需要指定编码格式了,不要编码了
            contentType:false,
            data:formdata,
            success:function (data) {
                alert(data)
            }
        })
    })
</script>

（2）视图层

def add_file(request):
    if request.method==‘GET‘:
        return render(request,‘add_files.html‘)
    # 这是个字典
    dic_files=request.FILES
    myfile=dic_files.get(‘myfile‘)
    with open(myfile.name,‘wb‘) as f:
        # 循环上传过来的文件
        for line in myfile:
            # 往空文件中写
            f.write(line)
    return HttpResponse(‘ok‘)

def files_ajax(request):
    # 提交文件从,request.FILES中取,提交的数据,从request.POST中取
    name=request.POST.get(‘name‘)
    print(name)
    dic_files = request.FILES
    myfile = dic_files.get(‘myfile‘)
    with open(myfile.name, ‘wb‘) as f:
        # 循环上传过来的文件
        for line in myfile:
            # 往空文件中写
            f.write(line)
    return HttpResponse(‘ok‘)

（3）路由层

url(r‘^files/$‘, views.add_file),
url(r‘^files_ajax/‘, views.files_ajax),

注意点：

1、基于form表单上传文件，需要指定编码格式，那么ajax一样也是，首先我们先创建一个FormData的一个对象
2、我们通过append方法，给对象传值append(value1,value2),相当于value1=value2
3、processData:false,  # 告诉jQuery不要去处理发送的数据
   contentType:false,  # 告诉jQuery不要去设置Content-Type请求头
4、processData的值只能是布尔值，因为这时的data的值，是一个对象，所以不需要进行处理了

六、基于ajax提交json格式数据

1、模板层

<form  >
    <p>用户名:<input type="text" name="name" id="name"></p>
    <p>密码:<input type="password" name="pwd" id="pwd"></p>
    <input type="submit" value="提交">
</form>

<button id="btn">ajax提交json格式</button>
</body>

<script>
    $(‘#btn‘).click(function () {
        var post_data={‘name‘:$("#name").val(),‘pwd‘:$("#pwd").val()};
        console.log(typeof post_data);
        //JSON.stringify相当于python中json.dumpus(post_data)，把数据装换位json格式字符串
        //pos是个json格式字符串
        var pos=JSON.stringify(post_data);
        console.log(typeof pos);
        $.ajax({
            url:‘/json/‘,        // url这里为空的话，默认向该页面发出ajax请求
            type:‘post‘,       // type值为空的话，默认为get方法
            data:pos,
            contentType:‘application/json‘,
            dataType:‘json‘,
            success:function (data) {
                //如果data是json格式字符串,如何转成对象(字典)?
                //data=JSON.parse(data)
                console.log(typeof data)
                console.log(data.status)
                /*
                console.log(data)
                var ret=JSON.parse(data)
                console.log(typeof ret)
                console.log(ret.status)
                */

                //alert(data)

            }
        })

    })
</script>

2、视图层

def add_json(request):
    if request.method==‘GET‘:
        return render(request,‘json.html‘)
    print(request.POST)
    print(request.GET)
    print(request.body)
    import json
    # res是个字典
    res=json.loads(request.body.decode(‘utf-8‘))
    print(res)
    print(type(res))
    dic={‘status‘:‘100‘,‘msg‘:‘登录成功‘}
    # return HttpResponse(‘ok‘)
    # 返回给前台json格式
    # return HttpResponse(json.dumps(dic))
    return JsonResponse(dic)

3、路由层

url(r‘^json/‘, views.add_json),

总结：

1、如果是文件，就先创建一个FormData对象,以key，value的位置，参传数进去
       在ajax方法里，data对应的值就是这个FormData对象，所以在processData的值应该为false，
       contentType的值也为false(让jquery不设置请求头)
       注意：它文件在后面中request.FILES里面，如果有其他input框所对应的value，它的值在POST中取
2、如果不是上传文件，就是form表单的里input的话，就直接传了，contentType默认为urlencoded编码方法
3、json格式数据，首先是把对象给造出来，并且把数据放里面，然后转换成json格式字符串，这里contentType必须为‘application/json‘，这样它的的数据在request.body里，是二进制格式
4、在前端接收到后台json格式数据，可以在ajax那里写dataType:‘json‘，它会自动转换成对象

原文地址：https://www.cnblogs.com/zhangbingsheng/p/10663808.html

时间： 2024-11-13 05:47:33

Django框架（十二）-- Djang与Ajax的相关文章

Django框架（二）---- 常用命令

Django框架(二) 常用命令: 文章中,命令中带有 manage.py 字样的,代表需要进入project/manage.py文件同一级的目录下 1.创建项目: django-admin startproject project-name django-admin:在Windows中,若报错,可用django-admin.py代替 project-name:项目名称,需要符合Python的包命名规范 项目结构:manage.py文件是后续命令操作的关键 2.创建App: python man

Django框架（二十）-- Django rest_framework-权限组件

一.权限组件的使用 # 用户信息表 class UserInfo(models.Model): name = models.CharField(max_length=32) # 写choice user_choice=((0,'普通用户'),(1,'会员'),(2,'超级用户')) # 指定choice,可以快速的通过数字,取出文字 user_type=models.IntegerField(choices=user_choice,default=0) pwd = models.CharFiel

Django框架form表单配合ajax注册

总结一下,其实form组件的主要功能如下: 生成页面可用的HTML标签 对用户提交的数据进行校验 保留上次输入内容 下面是写的登录页面的实例 1:views视图中的代码 # 注册页面 def register(request): if request.method == 'POST': # 将提交过来的数据放的form表单中进行校验 form_obj = forms.Register(request.POST) # 判断校验是否真确 print(form_obj.is_valid()) ret

Django框架（二十七）—— ContentType组件

目录 ContentType组件 一.什么是ContentType组件 二.使用ContentType 三.使用场景总结 ContentType组件 一.什么是ContentType组件 contentType是Django内置的组件,可以方便我们快速的连表查询. 可以追踪项目中所有app和model的对应关系,并记录在ContentType表中 models.py文件的表结构写好后,通过makemigrations和migrate两条命令迁移数据后,在数据库中会自动生成一个django_con

Django 第十二课 【class meta】

Class meta: 通过一个内嵌类 "class Meta" 给你的 model 定义元数据, 类似下面这样: class Foo(models.Model): bar = models.CharField(maxlength=30) class Meta: # ... Model 元数据就是 "不是一个字段的任何数据" -- 比如排序选项, admin 选项等等. 下面是所有可能用到的 Meta 选项. 没有一个选项是必需的. 是否添加 class Meta

Django框架（二十三）—— Django rest_framework-解析器

解析器 一.解析器的作用 根据请求头 content-type 选择对应的解析器对请求体内容进行处理,将传过来的数据解析成字典 二.使用解析器 1.局部使用 在视图类中重定义parser_classes即可,默认能够解析formdata.urlencoded.json格式的数据 from rest_framework.parsers import JSONParser,FormParser class Test(APIView): # 定义两个,表示该是视图类,能够解析urlencoded和js

Django框架（二十一）--Django rest_framework-频率组件

一.作用 为了控制用户对某个url请求的频率,比如,一分钟以内,只能访问三次 二.自定义频率类 # 写一个频率认证类 class MyThrottle: visit_dic = {} visit_time = None def __init__(self): self.ctime = time.time() # 重写allow_request()方法 # request是request对象,view是视图类,可以对视图类进行操作 def allow_request(self, request,

Django框架(十)：视图(三) Cookie、Session

1. Cookie Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).Cookie最早是网景公司的前雇员Lou Montulli在1993年3月的发明.Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器(前提是浏览器设置为启用cookie).Cookie名称和值可

Django框架简介与使用注意事项

一.Django框架简介 MVC框架和MTV框架 MVC框架 MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller),具有耦合性低.重用性高.生命周期成本低等优点. Django框架的设计模式借鉴了MVC框架的思想,也是分成三部分,来降低各个部分之间的耦合性. Django框架的不同之处在于它拆分的三部分为:Model(模型).Template(模板)和View(视

Python开发【第二十二篇】：Web框架之Django【进阶】

Python开发[第二十二篇]:Web框架之Django[进阶] 猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 新随笔 联系 订阅 管理 随笔-124  文章-127  评论-205 Python之路[第十七篇]:Django[进阶篇 ] Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻