Итак, я столкнулся с проблемой, которую не могу решить, даже просмотрев ресурсы стека и Google.Позвольте мне поделиться с вами.
Мои конфиги / инструменты: Raspberry Pi Zero W, Raspbian, python 3.5, Django framework, Bootstrap.
Я общаюсь через GPIO и управляю им через RPi через веб-браузер (Chrome).
Мой тестовый стенд - это набор светодиодов, которые я могу включать и выключать как с помощью оболочки, так и с помощью прямого MVC (схема правильная).
Моя цель и проблема одновременно - включать и выключать светодиоды с помощью AJAX, чтобы страница не перезагружалась при каждом нажатии кнопки (что происходит, когда я не использую jquery / AJAX).
На текущем этапе после нажатия кнопки кажется, что весь код выполняется, кроме функции control_button in views.py .
Мои журналы после нажатия кнопки:
"GET /vendapp/ HTTP/1.1" 200 6027
"POST /vendapp/ HTTP/1.1" 200 6027
AJAX также получает возможность выполнить success: function ...
Вот код:
html 1
<!doctype html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>FP</title>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
<link rel="stylesheet" href="{% static 'personal/css/custom1.css' %}" type = "text/css"/>
<link rel="stylesheet" href="{% static 'personal/css/conti1.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
</style>
</head>
<body>
<header>
<div class="container-fluid p-0 px-md-0 mb-0">
<div class="d-flex flex-row flex-md-row align-items-center p-0 px-md-0 mb-0 border-bottom box-shadow">
<div class="col">
<div class="media align-items-center p-2 px-md-0 mb-0">
<img class="mb-1" src="{% static '/personal/img/c.png' %}" class="responsive-img" style='max-height: 64px; max-width: 64px;' alt="c1">
<div class="media-body">
<h5 class="mt-0">TITLE</h5>
<h6><em>Cliche</em></h6>
</div>
</div>
</div>
</div>
</div>
</header>
<main>
{% block content %}
{% endblock %}
</main>
<footer>
...
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery library -->
<script src="{% static 'personal/jquery/jquery.js' %}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="{% static 'personal/js/bootstrap.js' %}"></script>
{% block javascript %}{% endblock %}
</body>
</html>
html 2
{% extends "personal/header3.html" %}
{% block javascript %}
<script>
$(function() {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
$('.btn-outline-primary').click(function(){
var pinID = $(this).attr('data-pinID');
alert(pinID);
$.ajax({
type: "POST",
url: "{% url 'control_button' %}",
data: {'getdata': JSON.stringify(pinID)},
datatype: 'json',
success: function(){
alert(pinID);
console.log(pinID);
},
error: function() {
alert('error');
}
});
});
});
</script>
{% endblock %}
{% block content %}
{% load static %}
<form method="post">
{% csrf_token %}
<div class="container-fluid p-0 px-md-0 mb-0 " id="main">
<div class="d-flex flex-row flex-md-row align-items-center p-0 px-md-0 mb-0">
<div class="col-sm-8">
<div class="container-fluid">
<button type="button" id="btn4" data-pinID="127" class="btn btn-lg btn-outline-primary border-0 mt-4 mr-3 ml-3 mb-3 pt-4 pl-3 pr-3 pb-3" style="background: url({% static '/personal/img/blk.jpg'%}) center">
</button>
<button type="button" id="btn5" data-pinID="191" class="btn btn-lg btn-outline-primary border-0 mt-4 mr-3 ml-3 mb-3 pt-4 pl-3 pr-3 pb-3" style="background: url({% static '/personal/img/blk.jpg'%}) center">
</button>
<button type="button" id="btn6" data-pinID="223" class="btn btn-lg btn-outline-primary border-0 mt-4 mr-3 ml-3 mb-3 pt-4 pl-3 pr-3 pb-3" style="background: url({% static '/personal/img/blk.jpg'%}) center">
</button>
</div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
</form>
{% endblock %}
views.py
from django.shortcuts import render, get_object_or_404
from time import sleep
from smbus2 import SMBusWrapper
import json, sys
from django.http import JsonResponse, HttpResponse
DURATION = 4.0
def index(request):
return render(request, 'personal/home.html')
def control_button(request):
if request.method == 'POST':
btn_pin = int(request.POST.get('getdata', None))
with SMBusWrapper(1) as bus:
#write a button pin as 8-bit to adress 38, offset 0
bus.write_byte_data(0x38, 0, btn_pin)
sleep(DURATION)
data = 255
bus.write_byte_data(0x38, 0, data)
return JsonResponse()
urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name = 'index'),
path('', views.control_button, name = 'control_button'),
]
Большое спасибо за помощь.