基于Django与ajax之间的json传输方法

下面是关于基于Django和ajax之间的json传输方法的详细攻略：

一、基本概念

1.1 什么是 json？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，以文本的形式表达数据，能够有效地传递数据。它可以被任意的编程语言读取和理解。

JSON 的组成为“名称/值”对，一般使用大括号 {} 包含。名称和值之间使用冒号 : 进行分割，每个“名称/值”对之间使用逗号 , 进行分割。下面是一个 JSON 对象的示例：

{
    "name": "jack",
    "age": 27,
    "hometown": "New York",
    "hobbies": ["reading", "music", "cinema"]
}

1.2 什么是 ajax？

AJAX(Asynchronous JavaScript And XML) 是一种创建快速动态网页的技术。它利用 js 和 xml(xml可被json代替) 实现异步数据交换。

二、在 Django 中使用 json

2.1 Django 序列化为 json

Django 中自带了序列化成 json 的方法，可以将模型实例序列化为 json 字符串，返回给前端页面。其基本用法如下：

from django.http import JsonResponse
from app.models import MyModel

def get_my_model_data(request, model_id):
    my_model = MyModel.objects.get(id=model_id)
    data = {
        'name': my_model.name,
        'age': my_model.age,
        'gender': my_model.gender,
        'address': my_model.address,
    }
    return JsonResponse(data)

在这个例子中，我们从数据库中获取了 MyModel 的一条数据，并将其序列化为 json 格式的数据，并通过 JsonResponse 方法返回。

2.2 将前端页面的表单提交序列化为 json 数据

如果前端页面中包含表单数据，需要将这些数据序列化为 json 格式的数据，然后通过 ajax 发送给后端 Django 服务器进行处理，可以使用 jQuery 库的 serialize() 方法将表单数据序列化为 json 格式的数据。

<form id="my-form">
    <input type="text" name="name" />
    <input type="number" name="age" />
    <input type="text" name="gender" />
    <input type="text" name="address" />
    <button type="button" onclick="submitForm()">提交</button>
</form>

function submitForm() {
    var form_data = $("#my-form").serializeArray();
    var data = {};
    $.each(form_data, function(index, field){
        data[field.name] = field.value;
    });
    var json_data = JSON.stringify(data);

    $.ajax({
        url: '/my_form_submit/',
        type: 'POST',
        data: json_data,
        dataType: 'json',
        success: function(res) {
            console.log(res.result);
        },
        error: function() {
            alert('提交失败');
        }
    });
}

在这个示例中，我们使用了 jQuery 的 $.each() 方法，将表单序列化的数组形式转换为一个对象，并将其转换为 JSON 格式的字符串，然后通过 ajax 发送给后端服务器进行处理。

三、示例说明

3.1 示例 1：使用 Django 序列化为 json

下面是一个简单的示例，使用 Django 内置的 JsonResponse 方法实现将数据序列化为 json 格式并返回给前端。

# views.py
from django.http import JsonResponse

def get_data(request):
    data = {
        'name': 'jack',
        'age': 27,
        'gender': 'male',
        'address': 'New York'
    }
    return JsonResponse(data)

在这个示例中，我们构造了一个字典类型的数据 data，其中包括了 name、age、gender、address 等字段。在视图函数 get_data 中，我们使用 Django 内置的 JsonResponse 方法将 data 序列化为 json 格式的数据，并返回给前端。

在前端页面中，通过 ajax 请求我们的后端 Django 服务器，获取到了返回的 json 格式的数据，并将其输出到了控制台上。

// index.html
$.ajax({
    url: '/get_data/',
    type: 'GET',
    dataType: 'json',
    success: function(res) {
        console.log(res);
    },
    error: function() {
        alert('请求失败');
    }
});

3.2 示例 2：将前端的表单数据序列化为 json 格式并提交给后端

下面是一个示例，演示如何将表单数据序列化为 json 格式的数据，并通过 ajax 发送给后端 Django 服务器进行处理。

# views.py
from django.http import JsonResponse

def my_form_submit(request):
    received_data = json.loads(request.body)
    name = received_data['name']
    age = received_data['age']
    gender = received_data['gender']
    address = received_data['address']
    # 进行数据库操作等相关处理，如保存表单数据等

    data = {'result': 'success'}
    return JsonResponse(data)

在这个示例中，我们构造了一个视图函数 my_form_submit，用于接收前端页面传递过来的 json 格式的数据，并进行相关处理。

在前端页面中，我们构建了一个表单，其中包括了 name、age、gender、address 等字段，并通过 jQuery 的 serialize() 方法将表单数据序列化为数组形式的数据，并将其转换为 json 格式的数据进行提交：

<!-- index.html -->
<form name="my_form">
    <p>姓名：<input type="text" name="name" value="" /></p>
    <p>年龄：<input type="number" name="age" value="" /></p>
    <p>性别：<input type="text" name="gender" value="" /></p>
    <p>地址：<input type="text" name="address" value="" /></p>
    <input type="button" name="submit_btn" onclick="submitMyForm()" value="提交" />
</form>

<script>
function submitMyForm() {
    var form_data = $('form[name="my_form"]').serializeArray();
    var data = {};
    $.each(form_data, function(index, field) {
        data[field.name] = field.value;
    });
    var json_data = JSON.stringify(data);

    $.ajax({
        url: '/my_form_submit/',
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: json_data,
        success: function(res) {
            alert('提交成功');
        },
        error: function() {
            alert('提交失败');
        }
    });
}
</script>

在前端页面中，我们定义了一个 submitMyForm() 函数，用于获取表单数据并将其序列化为 json 格式的数据，然后通过 ajax 发送给后端 Django 服务器进行处理。在成功提交后，页面将显示“提交成功”的提示信息。

希望这个示例能够帮助你更好地理解如何在 Django 和 ajax 之间使用 json 进行数据传输。