如何使用AJAX或类似的东西在Django中使用Python脚本?

时间:2018-04-15 10:12:13

标签: python ajax django django-rest-framework

我正在开展物联网项目,就像学校和大学的智能出勤和无现金支付系统一样。我使用Raspberry Pi 3作为我的客户机和DigitalOcean来托管PostgreSQL和核心Django项目。除了Raspberry Pi,我使用的是EM-18 RFID阅读器和R305指纹识别器。现在,截至目前,我已经构建了一个CLI实用程序来使用项目,但对于一般不熟悉Linux或shell的人来说,这并不是很方便。

现在我的问题在于我当前的代码逻辑。例如,如果我想将学生信息及其RFID /指纹信息添加到数据库,我首先扫描分配给他们的RFID标签。检查该标签是否已存在于数据库中,如果没有,则询问其信息。完成此步骤后,我再次要求他们再次点击相同的卡片以注册他们的指纹。所有这些过程在CLI上都没有任何问题。我无法弄清楚如何让操作员知道现在要执行哪个步骤。虽然我在Django中构建了一个Web界面,但它既不是用户友好的,也不是交互式的。我想我必须使用JSON / AJAX来做到这一点,但我不知道如何做到这一点。

2 个答案:

答案 0 :(得分:3)

请不要将此作为答案阅读,而是更长时间的评论;)

首先阅读MVC概念(例如:https://djangobook.com/model-view-controller-design-pattern/)以了解Web界面如何与其余代码交互。

经典的django方式将是

  1. 根据您的form创建forms.pymodel)。
  2. 你会写一些html来在网站上显示表格
  3. 验证views.py
  4. 中的表单输入
  5. 发回结果并显示它们(再次显示为html)
  6. 如果你想用AJAX做一些额外的工作,但结果将是值得的。 (例如:How to POST a django form with AJAX & jQuery

    您将调用首先在urls.py文件中初始化的特定网址(django 2.0中为path('checkForm', views.checkForm, name='checkForm'),

    url指向views.py中定义的名称为checkForm的函数(与此示例中的url路径相同,但您可以随意调用它)。在这个函数中你可以编写你的python代码或从那里调用函数来执行你的db quires,验证等。 发回包含代码结果的回复。

    success: function(data, status) { $('#whatever').html(data); alert("whatever"); }

    "数据"在这里是来自服务器的响应。 我希望我能给你一个正确方向的暗示。请问你是否卡在某处。

    P.S。我不知道如何通过http发送指纹数据,检查是否有一些库。

    x=data.read(12).decode("utf-8")
    tag_id_in = x
    

    这是错误的代码,请摆脱x。第一个x是一个错误的变量名称,第二个是完全冗余的。 您还希望将print语句转换为logs或其他任何内容,但打印不会让您走得更远。

答案 1 :(得分:1)

我终于明白了。我将流程分为多个部分。然后我进行AJAX调用以访问它。

我的urls.py文件:

from django.conf.urls import url
from .views import tag, check_tagid, scan_tag

urlpatterns = [
    url(r'^tag/', tag, name="tag"),
    url(r'^check_tagid/', check_tagid, name="check_tagid"),
    url(r'^scan_tag/', scan_tag, name="scan_tag"),
]

我的views.py文件:

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
from .models import Student
import serial

def check_tagid(request):
    """Check if scanned tag id is already associated or not"""
    tagid = request.GET.get('tagid', None)
    if Student.objects.filter(tag_id__iexact=tagid).exists():
        data = {
            'is_taken': Student.objects.filter(tag_id__iexact=tagid).exists(),
            'student': Student.objects.get(tag_id=tagid).name
        }
    else:
        data = {
            'is_taken': Student.objects.filter(tag_id__iexact=tagid).exists(),
        }
    return JsonResponse(data)


def scan_tag(request):
    """Function to check if tag is scanned or not"""
    if request.is_ajax():
        ## Init RFID reader
        data = serial.Serial(
                            port='/dev/ttyUSB1',
                            baudrate = 9600,
                            parity=serial.PARITY_NONE,
                            stopbits=serial.STOPBITS_ONE,
                            bytesize=serial.EIGHTBITS
                            )

        context = {'tagid': data.read(12).decode("utf-8")}
        return JsonResponse(context) 
    else:
        return HttpResponse("This route only handles AJAX requests")


def tag(request):
    return render(request, 'students/tag.html', {})

我的tag.html文件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
    <center><h1><div id="tag_id">Scanning for tag</div></h1></center>
    <div id="if_exists"></div>


  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $.get("/scan_tag/", function(data) {
        console.log(data.tagid);
        var x = document.createElement("INPUT");
        x.setAttribute("id", "tag_id_in");
        x.setAttribute("type", "hidden");
        x.setAttribute("value", data.tagid);
        document.body.appendChild(x);
        // check tag
        tagid = $("#tag_id_in").val();
        console.log(tagid);
        $.ajax({
            type: "GET",
            url: "{% url 'check_tagid' %}",
            data: {
                'tagid': tagid
            },
            success: function(data) {
                if (data.is_taken) {
                    document.getElementById('tag_id').innerHTML = "Welcome "+data.student;
                } else {
                    document.getElementById('tag_id').innerHTML = "No student with this tag id found";
                }
            }
        });
    });
});
</script>


</body>
</html>

所有这些现在都按预期工作。

因此,/tag/是主要切入点。现在tag.html我在get上使用了jQuery /scan_tag/方法。它将返回RFID标签号。然后我在/check_tagid/上调用AJAX,它将为true / false,具体取决于学生是否在数据库中。