使用ajax与Django独立提交两个表单



我试图用ajax用Django提交两个POST表单,但其中只有一个表单中有POST方法。我真的不知道该怎么办,错误可能在Javascript中,但我不明白为什么第一个表单用POST方法提交,第二个表单没有,我试着在互联网上搜索,但我认为我没有找到正确的问题。

(对不起我英语不好(

views.py

import os
import time
from datetime import datetime
from django.http import HttpResponse, StreamingHttpResponse
from django.shortcuts import render
from utils.camera_streaming_widget import CameraStreamingWidget

# Camera feed
def camera_feed(request):
stream = CameraStreamingWidget()
frames = stream.get_frames()
return StreamingHttpResponse(frames, content_type='multipart/x-mixed-replace; boundary=frame')

def detect(request):
stream = CameraStreamingWidget()
success, frame = stream.camera.read()
if success:
status = True
else:
status = False
return render(request, 'detect_barcodes/detect.html', context={'cam_status': status})
def dados(request):
if request.method == 'POST':
name = request.POST['name'] 
print('HELLO')
return HttpResponse(name)
def dados_cod(request):
if request.method == 'POST':
cod = request.POST['cod'] 
print(cod)
return HttpResponse(cod)

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Detect Barcodes</title>
<style type="text/css">
.navbar-brand
{
font-size: xx-large;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #3c8f56;">
<div class="container-fluid container-md">
<a class="navbar-brand" href="{% url 'detect_barcodes' %}"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id='NomeDoSem'><h2>Sistema de Presença</h2></div>

<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Nome do Seminario
</button>
<ul class="dropdown-menu">
<form id="post-name">
{% csrf_token %}
<div class="input-group mb-3">
<input type="text" class="form-control" aria-describedby="basic-addon2" id="name" name="name">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit">Enviar</button>
</div>
</div>
</form>
</ul>
</div>
</div>
</nav>
<div class="container">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
{% block content %}
{% endblock content %}
</div>
<br>
<form name="post-cod">
{% csrf_token %}
<div class="input-group mb-3">
<input type="text" class="col-md-offset-5 col-md-5 " id="cod" name="cod" style="border: 0.5px solid gray;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit">Enviar</button>
</div>
</div>
</form>
<script text="text/javascript">
$('#post-name').submit(function(e){
e.preventDefault();

$.ajax({
type:'post',
url:'{% url "dados" %}',
data:{ 
name:$('#name').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
},
success: function(data){
$('#NomeDoSem').empty()
$('#NomeDoSem').html('<h2>'+data+'</h2>')
}
});
});

$('#post-cod').submit(function(b){
b.preventDefault();

$.ajax({
type:'post',
url:'{% url "dados_cod" %}',
data:{ 
cod:$('#cod').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
},
success: function(data){
alert('cpf')
}
});
});
</script>
</body>
</html>

<form id="post-cod">替换<form name="post-cod">

最新更新