0
597
Vistas¿Cómo usar Fetch correctamente en JavaScript y Django?
Estoy tratando de hacer un decodificador METAR como se muestra: 
Estoy usando fetch en Vanilla js y planeo enviar el código ingresado a una vista de Django. Desde la vista de Django, los datos decodificados se tomarán y se mostrarán en la plantilla.
vistas.py
def ToolsPageView(request): if request.method == "POST": jsonData = json.loads(request.body) metarCode = jsonData.get('Metar') return JsonResponse("Success", safe=False) return render(request, 'app/tools.html')urls.py
... path("tools", views.ToolsPageView, name="tools")herramientas.html
<div class="metar-code-decode"> <form method="POST" action="{% url 'tools' %}" id="metar-form"> {% csrf_token %} <input type="text" placeholder="Enter METAR: " id="metar-value"> <br> <input type="submit" id="metar-button"> </form> </div>herramienta.js
function getDecodedMetar() { let formButton = document.querySelector("#metar-button"); formButton.onclick = function (e) { let metarCode = document.querySelector("#metar-value").value; sendMetar(metarCode); //e.preventDefault(); //getMetar(metarCode); }; } function sendMetar(metarCode) { fetch('/tools', { method: "POST", headers: { "X-CSRFToken": getCookie("csrftoken"), }, body: JSON.stringify({ Metar: metarCode, }), }); } He usado el mismo código para POST usando fetch donde tuve que dejar que el usuario actualice su perfil. Y eso funcionó. Pero esto no funciona y el error sigue cambiando de vez en cuando después de reiniciar el servidor. En el primer intento, no se produjo ningún error y el servidor también mostró que se estaba realizando una solicitud POST . Y el último error que recibo es "Para permitir que se serialicen objetos que no son dictados, establezca el parámetro seguro en Falso". Recibo lo mismo una y otra vez, incluso después de configurar safe=False dentro de JsonResponse() . Vale la pena señalar que la request cuando se convierte a request.json() da un error.
¿Estoy usando fetch incorrectamente? En caso afirmativo, ¿cuál es la forma correcta?
1 Respuestas
Responde la pregunta0
No estoy seguro de que tengas el flujo correcto. La idea es que el botón, cuando se haga clic, llamará a una función (recuperar) que enviará datos a la vista, que los decodificará y los enviará de vuelta al JavaScript, para que se puedan mostrar sin recargar toda la página .
Creo que esto podría ayudar:
let formButton = document.querySelector("#metar-button"); // When the button is clicked, formButton.onClick = function(e) { // do NOT send the form the usual way e.preventDefault(); let metarCode = document.querySelector("#metar-value").value; // Run the function that will send the code to the ToolsPageView sendMetar(metarCode); } async function sendMetar(metarCode) { const response = await fetch('/tools', { method: "POST", headers: { "X-CSRFToken": getCookie("csrftoken"), }, body: JSON.stringify({ 'Metar': metarCode, }), }) .then(response => response.json()) .then(data => { console.log(data); // extract the decoded value from the data sent back from the view // display it by targeting the element in your html that you want // to display it }); }Y en tu opinión,
def ToolsPageView(request): if request.method == "POST": jsonData = json.loads(request.body) metarCode = jsonData.get('Metar') # Remove the original JsonResponse # return JsonResponse("Success", safe=False) # and INSTEAD, # Send the code back to the JavaScript # I don't THINK you need safe=False here? return JsonResponse({'MetarCode': metarCode}) return render(request, 'app/tools.html')