Django与JS交互的示例代码

接下来我会为你详细介绍如何使用Django与JS进行交互，并提供两个示例说明。

1. Django与JS交互方式汇总

前端与后端之间通信的方式主要有以下几种：

• 使用模板语言：Django中，可以使用Django自带的模板语言，将变量传递到HTML模板中，JavaScript再从HTML中获取变量。

• Ajax：JavaScript通过Ajax发送HTTP请求到Django的views.py文件中的请求处理函数，然后将结果通过JSON格式返回给客户端。

• Websocket：WebSocket提供了一种在Web浏览器和服务器之间进行实时双向数据传输的网络协议，不过Django本身并不支持WebSocket，需要使用第三方包进行支持。

2. 示例1 - 使用Ajax与Django交互

2.1 服务端代码

Django视图函数中可以返回JSON格式的数据，通过Ajax调用可以实现前后端的交互。下面是示例代码：

from django.http import JsonResponse

def ajax_view(request):
    if request.method == 'POST':
        data = request.POST.get('data')
        return JsonResponse({'result': 'success', 'data': data})

在这个示例代码中，我们可以看到视图函数ajax_view接收一个POST请求，从请求的参数中获取data数据，然后返回一个JSON格式的数据。这个JSON数据包含了一个键名为”result”和键值为”success”的状态标志，以及一个键名为”data”的键值对，其键值对应的值是从POST请求中获取的数据。

2.2 客户端代码

客户端代码部分是通过JavaScript来实现的。我们可以使用JQuery等框架进行Ajax请求。下面是客户端代码：

$.ajax({
    url: '/ajax-view/',
    type: 'POST',
    data: {'data': 'JavaScript post data'},
    dataType: 'json',
    success: function(result) {
        console.log(result.result);
        console.log(result.data);
    }
});

在这个代码实例中，我们通过AJAX请求的方式向服务端发送一个POST请求，并且带上了一条字符串数据。请求成功后，我们可以在控制台中输出返回结果的result和data数据。

3. 示例2 - 使用WebSocket和Django进行交互

本示例需要使用第三方包：Channels。Channels是Django的一个第三方库，提供了一套基于WebSockets协议的可扩展接口，用于处理实时性应用中的长连接需求。下面是示例代码：

3.1 服务端代码

# chat/views.py

from django.shortcuts import render
from channels import Group
from channels.auth import channel_session_user_from_http, channel_session_user
from .models import Message
from .utils import get_last_10_messages, get_user_contact

def index(request):
    return render(request, 'chat/index.html')

def room(request, room_name):
    return render(request, 'chat/room.html', {
        'room_name': room_name
    })

# Connected to websocket.connect
@channel_session_user_from_http
def ws_connect(message):
    message.reply_channel.send({"accept": True})
    Group("chat").add(message.reply_channel)

# Connected to websocket.receive
@channel_session_user
def ws_message(message):
    data = json.loads(message['text'])
    data['username'] = message.user.profile.username
    message.reply_channel.send({
        "text": json.dumps(data)
    })

# Connected to websocket.disconnect
@channel_session_user
def ws_disconnect(message):
    Group("chat").discard(message.reply_channel)

在上述代码中，我们定义了四种函数：ws_connect、ws_message、ws_disconnect与index。其中，ws_connect接受Channels对于WebSocket的连接请求，创建一个Group，ws_message处理由客户端发来的消息，ws_disconnect关闭连接。index函数则返回了一个HTML模板，客户端通过访问该模板建立WebSocket的连接。

我们需要在Django的工程settings.py中设置CHANNEL_LAYERS参数，来进行WebSocket的处理。具体设置详情请在Django Channels官方文档中查看。

3.2 客户端代码

以下是客户端使用JavaScript编写WebSocket代码的示例：

var chatSocket = new WebSocket(
    'ws://' + window.location.host + '/ws/chat/' + roomName + '/');

chatSocket.onmessage = function(e) {
    var data = JSON.parse(e.data);
    var message = data['message'];
    var username = data['username'];
    var date = data['date'];
    var messageHtml = '<div class="message">' +
        '<strong>' + username + '</strong> ' +
        '<em>' + date + '</em><br/>' +
        message +
        '</div>';
    document.querySelector('#chat-log').innerHTML += (messageHtml);
};

在这个JavaScript中，我们通过WebSocket实例化一个名为chatSocket的对象，通过连接到chat/{{ room_name }}的地址与服务器建立连接。在onmessage函数中，我们解析返回的消息并将消息的内容和发送者展示在页面上（这一部分的代码不在本文帮助范围内，下面只是提供了一个简单的示例）。

以上便是使用Django与JS交互的示例代码攻略，希望对你有所帮助。