自学教程：Django如何与Ajax交互

urlencodedformdatajson

//手动构造数据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) {                 }    });}); 

//案例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);        }    });}); 

$("#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)        }    });});

// 第一种方式直接在发送数据中加入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>

class Country(models.Model):    name = models.CharField(verbose_name="国家", max_length=50)    def __str__(self):        return self.nameclass 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

{% 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>

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)

{% 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 %}

# handling AJAX requestsdef 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.'})