Как получить значение переменной из функции javascript в функцию python в django

Я пытаюсь сканировать QR-код с помощью html, javascript, как показано ниже на сайте nurse_home.html. Я могу сканировать и видеть содержимое QR-кода на сайте, но я не могу POST и записать его в мою базу данных, показанную на views_nurse.py. Любая помощь будет высоко оценена!

<nurse_home.html>

{% load static %}

{% block mainbody %}


<title>Django Online Barcode Reader</title>
<meta charset="utf-8">
 
{% csrf_token %}

<script src={% static "js/html5-qrcode.min.js" %}></script>
<style>
  .result{
    background-color: green;
    color:#fff;
    padding:20px;
  }
  .row{
    display:flex;
  }

</style>

{% csrf_token %}
<div class="row">
  <div class="col">
    <div style="width:500px;" id="reader"></div>
  </div>
  <div class="col" style="padding:30px;">
    <h4>Scanned Result</h4>
    <!--<div id="result" name="result">Result Here</div>-->
    <output type="POST" id="result" name="result" placeholder="qrCodeMessage">
      {% csrf_token %}
  </div>
</div>

<script type="text/javascript">
  function onScanSuccess(qrCodeMessage) {
    document.getElementById('result').innerHTML = '<span class="result">'+qrCodeMessage+'</span>';
  }

  function onScanError(errorMessage) {
  //handle scan error
  }

  var html5QrcodeScanner = new Html5QrcodeScanner(
      "reader", { fps: 10, qrbox: 250 });
  html5QrcodeScanner.render(onScanSuccess, onScanError);

</script>

{% endblock %}

<views.py>

def nurse_home(request):    
  return render(request, 'nurse_home.html')

<views_nurse.py>

@api_view(['GET',"POST"])
# Nurse scans QR
def nurse_qrscan(request):
    ### Test! nurse: QR
    if request.method == 'POST':
        result = request.POST.get("result")

        # Saving the result to database, nurse_QR
        qr_output = nurse_QR(output=result)
        qr_output.save()
        return Action.success("Successful")

<urls.py>

from hospital import view_nurse
from . import views

urlpatterns = [
    # Main Page
    path('', views.login, name='login'),
    path('nurse/', views.nurse_home),
    path('nurse_home/', views.nurse_home),

    # Nurse
    path('nurseLogin', view_nurse.nurseLogin, name='nurseLogin'),
    path('nurse_qrscan', view_nurse.nurse_qrscan, name='nurse_qrscan'),
]

Сделайте это в своем теге <script>: 

// Create a function to get the CSRF token
function getCookie(name) {
  let cookie = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
  return cookie ? cookie[2] : null;
}

function onScanSuccess(qrCodeMessage) {
  document.getElementById("result").innerHTML =
    '<span class="result">' + qrCodeMessage + "</span>";

  // Call the function here
  sendQrCode(qrCodeMessage);
}

async function sendQrCode(qrCode) {
  const response = await fetch("/nurse_qrscan", {
    method: "POST",
    headers: {
      "X-CSRFToken": getCookie("csrftoken"),
    },
    body: JSON.stringify({
      result: qrCode,
    }),
  })
    .then((response) => response.json())
    .then((data) => {
      // Do your thing here.
    });
}

function onScanError(errorMessage) {
  //handle scan error
}

var html5QrcodeScanner = new Html5QrcodeScanner("reader", {
  fps: 10,
  qrbox: 250,
});
html5QrcodeScanner.render(onScanSuccess, onScanError);

Сообщите мне, какая часть вас беспокоит для дальнейшего объяснения.

Вот разбивка.

Сначала вы получаете CSRF-токен из вашей формы с помощью следующего:

function getCookie(name) {
  let cookie = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
  return cookie ? cookie[2] : null;
}

Второе, после генерации qrcode в обратном вызове onScanSuccess, вы вызываете функцию sendQrCode с qr-кодом в качестве аргумента:

function onScanSuccess(qrCodeMessage) {
  document.getElementById("result").innerHTML =
    '<span class="result">' + qrCodeMessage + "</span>";

  // Call the function here
  sendQrCode(qrCodeMessage);
}

В-третьих, вы используете Fetch для отправки POST-запроса на nurse_qrscan маршрут:

async function sendQrCode(qrCode) {
  const response = await fetch("/nurse_qrscan", {
    method: "POST",
    headers: {
      // You pass the CSRF token generated from the function
      "X-CSRFToken": getCookie("csrftoken"),
    },
     // Create an object with `result` as property 
     // and the `qrCode` as value.
     // After that, convert it to JSON
     body: JSON.stringify({
       result: qrCode,
     }),
  })
    ....

Это метод POST из-за method: "POST"

После этого вы пишете функциональность для обработки данных, возвращаемых из вашего представления Django:

async function sendQrCode(qrCode) {
    ...
    .then((response) => response.json())
    .then((data) => {
      // Do your thing here.
    });
}
Вернуться на верх