Django 通过JS实现ajax过程详解

什么是Ajax

Ajax，全称Asynchronous JavaScript and XML，指的是一种基于现有的Web标准，利用JavaScript在保持页面无刷新的情况下与服务器进行数据交互的技术。

Django中的Ajax

Django通过提供内置的JSONResponse类以及Django REST framework等第三方库来支持Ajax请求。常见的实现方式是使用jQuery调用服务端API并处理返回值。

在示例中，我们将通过jQuery实现通过Ajax向服务端发送POST请求，同时展示一个简单的实时计算器实现。

示例1：实现JsonResponse

1. 在Django项目中定义一个简单的视图函数，用于处理Ajax请求。这里示例代码实现了一个求和函数，接收两个数字并返回它们的和。

from django.http import JsonResponse

def sum(request):
  result = []
  if request.method == 'POST':
    body_unicode = request.body.decode('utf-8')
    body = json.loads(body_unicode)
    a = body.get("a", 0)
    b = body.get("b", 0)
    result.append(a + b)
  else:
      result.append("请求方法不被允许")

  return JsonResponse({"result": result[0]})

1. 在前端使用jQuery发送POST请求，并处理返回结果。

$(document).ready(function(){
    $("form").submit(function(e){
        e.preventDefault(); // 防止页面刷新
        var a = $("#a").val();
        var b = $("#b").val();

        $.ajax({
            url: '/sum/',
            type: 'POST',
            data: {
              'a': a,
              'b': b
            },

            dataType: 'json',

            success: function(data) {
              $("#result").html(data.result)
              $("#result").show();
            },
            error: function(e){
              console.log(e);
            }
        });
    });
});

示例2：实时计算器

1. 在django中可以定义一个包含循环逻辑的视图函数，用于动态地计算结果。需要使用HttpResponse类或其子类来返回结果。

def calc(request):
  result = []
  if request.method == 'POST':
    body_unicode = request.body.decode('utf-8')
    body = json.loads(body_unicode)
    a = body.get("a", 0)
    b = body.get("b", 0)
    op = body.get("op", "+")
    result.append(eval(str(a) + op + str(b)))
  else:
      result.append("请求方法不被允许")

  return HttpResponse(str(result[0]))

1. 在前端使用jQuery发送POST请求，并处理返回结果。

$(document).ready(function(){
    $('.calc-btn').click(function(){
        var a = $('#num1').val();
        var b = $('#num2').val();
        var op = $(this).val();

        $.ajax({
            url: '/calc/',
            method: 'POST',
            data: {
              'a': a,
              'b': b,
              'op': op,
            },
            success: function(data){
                $('#result').text(data);
                $('#result').show();
            },
            error: function(e){
                console.log(e);
            }
        });
    });
});

总结

本文介绍了Django中如何通过Ajax实现与服务端的数据交互，提供了两个实例，分别展示了使用JSONResponse类和HttpResponse类处理Ajax请求和动态计算的案例。同时，jQuery也是主流的处理Ajax请求的JS库，有了jQuery的支持，我们可以方便的提升用户体验，提高前端页面的交互性。