Django如何与Ajax交互


Posted in Python onApril 29, 2021

前后端传输数据的编码格式

前后端传输数据的编码格式主要有三种, 本文接下来将详细演示。

urlencoded
formdata
json

Ajax提交urlencoded格式数据

Ajax给后台发送数据的默认编码格式是urlencoded,比如username=abcde&password=123456的形式。Django后端拿到符合urlencoded编码格式的数据都会自动帮你解析分装到request.POST中,与form表单提交的数据相同。

下面两种方式是等同的。

//手动构造数据data
$("#btnSubmit").click(function () {
    $.ajax({
        url: '/auth/', //也可以反向解析{% url 'login' %}
        type: 'post',
        data: {
            'username': $("#id_username").val(),
            'password': $('#id_password').val()
        },
        success: function (data){
            
        }
    });
};
                    
// .serialize() 方法可将<input>, <textarea> 以及 <select>表单序列化
// 成urlencoded格式数据
                      
$("#btnSubmit").click(function () {
    let data = $("#loginForm").serialize();
    $.ajax({
        url: "/auth/", //别忘了加斜杠
        type: $("#loginForm").attr('method'),
        data: data,
        success: function (data) {
         
        }
    });
});

Ajax通过FormData上传文件

Ajax上传文件需要借助于js内置对象FormData,另外上传文件时表单千万别忘了加enctype="multipart/form-data"属性。

//案例1,点击submi上传文件
$("#submitFile").click(function () {
    let formData = new FormData($("#upload-form"));
    $.ajax({
       url:"/upload/",//也可以写{% url 'upload' %}
       type:"post",
       data:formData,
       //这两个要必须写
       processData:false,  //不预处理数据  因为FormData 已经做了
       contentType:false,  //不指定编码了 因为FormData 已经做了
       success:function(data){
             console.log(data);
       }
    });
});
                       
//案例2,同时上传文件并提交其它数据
$("#submitFile").click(function () {
    //js取到文件
    let myfile = $("#id_file")[0].files[0];
    //生成一个FormData对象
    let formdata = new FormData();
    //加值
    formdata.append('name', $("#id_name").val());
    //加文件
    formdata.append('myfile', myfile);
    $.ajax({
        url: '/upload/', //url别忘了加/杠
        type: 'post',
        //这两个要必须写
        processData:false,  //不预处理数据  因为FormData 已经做了
        contentType:false,  //不指定编码了 因为FormData 已经做了
        data: formdata,
        success: function (data) {
            console.log(data);
        }
    });
});

Ajax提交Json格式数据

前后端传输数据的时候一定要确保声明的编码格式跟数据真正的格式是一致的。如果你通过Ajax发送Json格式数据给Django后端,请一定注意以下三点:

  1. contentType参数指定成application/json;
  2. 数据是真正的json格式数据;
  3. Django后端不会帮你处理json格式数据需要你自己去request.body获取并处理。
$("#submitBtn").click(function () {
    var data_obj={'name':'abcdef','password':123456};//Javascript对象
    $.ajax({
        url:'',
        type:'post',
        contentType:'application/json',  //一定要指定格式 contentType
        data:JSON.stringify(data_obj),    //转换成json字符串格式
        success:function (data) {
            console.log(data)
        }
    });
});

Ajax发送POST请求时如何通过CSRF认证

// 第一种方式直接在发送数据中加入csrfmiddlewaretoken
$("#btn").on("click",function () {
    $.ajax({
        url:"/some_url/",
        type:"POST",
        data:{
            csrfmiddlewaretoken: {{ csrf_token }}, //写在模板中,才会被渲染
        },
        success:function (data) {
    }
});
});
 
//通过jquery选择器获取csrfmiddlewaretoken
$("#btn").on("click",function () {
    $.ajax({
        url:"/some_url/",
        type:"POST",
        data:{
            csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val(),
        },
        success:function (data) {
            
        }
    });
});
 
//使用jquery.cookie.js调用请求头cookie中的csrftoken
<script src="/static/jquery.cookie.js"> 
<script>
     $("#btn").on("click",function () {
     $.ajax({
        url:"/some_url/",
        type:"POST",
        headers:{"X-CSRFToken":$.cookie('csrftoken')},
        data:$("#form1").serialize()
    });
   })
</script>

Django Ajax案例1:联动下例菜单

联动下拉菜单是Web开发中一个被经常使用的应用。比如当你从一个列表从选择一个国家的时候,联动下拉菜单会同步显示属于该国家所有城市列表供用户选择。今天我们就教你如何使用Django+Ajax生成联动下拉菜单。

我们的模型如下所示:

class Country(models.Model):
    name = models.CharField(verbose_name="国家", max_length=50)

    def __str__(self):
        return self.name


class City(models.Model):
    name = models.CharField(verbose_name="城市", max_length=50)
    country = models.ForeignKey(Country, on_delete=models.CASCADE, verbose_name="国家",)

    def __str__(self):
        return self.name

我们的模板如下所示,表单中对应国家和城市下拉菜单的DOM元素id分别为id_country和id_city。当用户选择国家后,ajax会携带国家的id值向后台发送请求获得当前国家的所有城市清单,并在前端渲染显示。

{% block content %}
<h2>创建用户 - 联动下拉菜单</h2>
<form method="post" class="form-horizontal" role='form' action="">
  {% csrf_token %}
  {{ form.as_p }}
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
{% endblock %}

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
    $("#id_country").change(function() {
      var country_id = $(this).val();

      $.ajax({
        url: '/ajax/load_cities/',
        data: {
          'country_id': country_id
        },
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            var content='';
            $.each(data, function(i, item){
                  content+='<option value='+item.id+'>'+item.name+'</option>'
                });
            $('#id_city').html(content)
        },

      });
    });
  </script>

Django负责处理视图Ajax请求的视图函数如下所示:

def ajax_load_cities(request):
    if request.method == 'GET':
        country_id = request.GET.get('country_id', None)
        if country_id:
            data = list(City.objects.filter(country_id=country_id).values("id", "name"))
            return JsonResponse(data, safe=False)

Django Ajax案例2:Ajax上传文件

前端模板及js文件如下所示, 请注意我们是如何在表单中加入了enctype属性,如何使用FormData上传文件,并解决了csrftoken问题的。

{% block content %}
<form action="" method="post" enctype="multipart/form-data" id="form">
    <ul class="errorlist"></ul>
    {% csrf_token %}
{{ form.as_p }}
 <input type="button" class="btn btn-info form-control" value="submit" id="btn" />
</form>
<table class="table table-striped" id="result">
</table>
{% endblock %}

{% block js %}
<script src=" https://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js ">
</script>
<script>
var csrftoken = $.cookie('csrftoken');
function csrfSafeMethod(method) {
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$(document).ready(function(){
   $('#btn').click(function(e){
        e.preventDefault();
        // 构建FormData对象
        var form_data = new FormData();
        form_data.append('file', $('#id_file')[0].files[0]);
        $.ajax({
        url: '/file/ajax_upload/',
        data: form_data,
        type: 'POST',
        dataType: 'json',
        // 告诉jQuery不要去处理发送的数据, 发送对象。
        processData : false,
        // 告诉jQuery不要去设置Content-Type请求头
        contentType : false,
        // 获取POST所需的csrftoken
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }},
        success: function (data) {
            if(data['error_msg']) {
                var content = '<li>'+ data['error_msg'] + '</li>';
                $('ul.errorlist').html(content);
            }
            else
            {
            var content= '<thead><tr>' +
            '<th>Name and URL</th>' +
            '<th>Size</th>' +
            '</tr></thead><tbody>';
             $.each(data, function(i, item) {
                  content = content +
                  '<tr><td>' +
                  "<a href= ' " +
                  item['url'] +
                  " '> " +
                  item['url'] +
                  '</a></td><td>' +
                  item['size'] +
                  '</td><td><tr>'
                });
             content = content + "</tbody>";
             $('#result').html(content);
             }
           },
        });
   });
 });
  </script>
{% endblock %}

Django负责处理视图Ajax请求的视图函数如下所示:

# handling AJAX requests
def ajax_upload(request):
    if request.method == "POST":
        form = FileUploadModelForm(data=request.POST, files=request.FILES)
        if form.is_valid():
            form.save()
            # Obtain the latest file list
            files = File.objects.all().order_by('-id')
            data = []
            for file in files:
                data.append({
                    "url": file.file.url,
                    "size": filesizeformat(file.file.size),
                    })
            return JsonResponse(data, safe=False)
        else:
            data = {'error_msg': "Only jpg, pdf and xlsx files are allowed."}
            return JsonResponse(data)
    return JsonResponse({'error_msg': 'only POST method accpeted.'})

以上就是Django如何与Ajax交互的详细内容,更多关于Django与Ajax交互的资料请关注三水点靠木其它相关文章!

Python 相关文章推荐
python optparse模块使用实例
Apr 09 Python
Python实现方便使用的级联进度信息实例
May 05 Python
Python实用技巧之利用元组代替字典并为元组元素命名
Jul 11 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
Feb 20 Python
Python中遍历列表的方法总结
Jun 27 Python
Python列表去重复项的N种方法(实例代码)
May 12 Python
Python 解析简单的XML数据
Jul 24 Python
python爬虫请求头设置代码
Jul 28 Python
Python3合并两个有序数组代码实例
Aug 11 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
Sep 01 Python
python geopandas读取、创建shapefile文件的方法
Jun 29 Python
Python代码实现双链表
May 25 Python
Python爬虫进阶之Beautiful Soup库详解
Apr 29 #Python
win10+anaconda安装yolov5的方法及问题解决方案
Python图像处理之图像拼接
4种非常实用的python内置数据结构
Apr 28 #Python
Python基础详解之描述符
Apr 28 #Python
详解Python 3.10 中的新功能和变化
Apr 28 #Python
Python基础之数据结构详解
Apr 28 #Python
You might like
PHP 危险函数全解析
2009/09/09 PHP
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php标签云的实现代码
2012/10/10 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
javascript 写类方式之六
2009/07/05 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
urllib2自定义opener详解
2014/02/07 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
python 生成图形验证码的方法示例
2018/11/11 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
python基于opencv检测程序运行效率
2019/12/28 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
艺术爱好者的自我评价分享
2013/10/08 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
如何写求职信
2014/05/24 职场文书
2014年医生工作总结
2014/11/21 职场文书
2015年国庆节寄语
2015/08/17 职场文书
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers