es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Django: envío de formulario HTML sin saltar a una nueva página o actualizar/recargar

31 Jul, 2023 Programación

Soy nuevo en django y html. A continuación se muestra mi primera página web de prueba de una calculadora en línea simple.

Encontré un problema, cuando hago clic en el botón “Enviar”, tiende a saltar a una nueva página web o una nueva pestaña. Esto no es lo que quiero. Una vez que el usuario ingrese los datos y haga clic en el botón “Enviar”, quiero que el campo “resultado” en la página muestre directamente el resultado (es decir, actualizar parcialmente solo ese campo) sin volver a cargar o saltar a la nueva página. También quiero que los datos ingresados por el usuario se mantengan en la misma página después de hacer clic en “Enviar”.

Vi que puede haber varias formas diferentes de hacer este trabajo, iframe/AJAX. Dado que soy nuevo, ¿cuál es la forma más sencilla de lograr este objetivo? Por cierto, no escribo scripts de javascript.

html:

<form method="POST">
    {% csrf_token %}
    <div>
      <label>num_1:</label>
      <input type="text" name="num_1" value="1" placeholder="Introduce el valor">
    </div>
    <div>
      <label>num_2:</label>
      <input type="text" name="num_2" value="2" placeholder="Introduce el valor">
    </div>
    <br>
    <div>{{ result }}</div>
    <button type="submit">Enviar</button>
</form>

view.py

def post_list(request):
    result = 0
    if request.method == "POST":
        num1 = request.POST.get('num_1')
        num2 = request.POST.get('num_2')
        result = int(num1) + int(num2)
        print(request.POST)
        print(result)

    context = {
        'result': result
    }
    return render(request, 'blog/post_list.html', context)
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el resultado deseado sin actualizar/saltar de página, puedes usar AJAX para actualizar el resultado en la misma página. Aquí te mostramos cómo hacerlo:

    1. Primero, necesitas incluir JQuery en tu archivo HTML. Agrega la siguiente línea en la sección head de tu archivo HTML:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    1. Luego, modifica tu formulario HTML para incluir un ID único y una función manejadora de eventos de envío que llame a una función AJAX. Agrega el siguiente código a tu etiqueta de formulario:
    <form method="POST" id="myForm">

    Y agrega el siguiente código a tu botón de envío:

    <button type="submit" onclick="submitForm()">Enviar</button>
    1. Ahora, crea una función AJAX en JavaScript. Agrega la siguiente etiqueta de script al final de tu archivo HTML:
    <script>
function submitForm() {
    $.ajax({
        url: "",
        type: "POST",
        data: $('#myForm').serialize(),
        success: function(response) {
            $('#result').html(response);
        },
        error: function(xhr, errmsg, err) {
            console.log(xhr.status + ": " + xhr.responseText);
        }
    });
}
</script>

    Esto configura una llamada AJAX que envía los datos del formulario al servidor sin recargar la página. Actualiza el contenido del campo “result” en la misma página con la respuesta del servidor.

    1. Finalmente, modifica tu vista de Django para devolver el resultado en formato JSON. Reemplaza tu variable de contexto actual con lo siguiente:
    context = {
    'result': result,
    'is_ajax': request.is_ajax()
}
if request.is_ajax():
    return JsonResponse({'result': result})
return render(request, 'blog/post_list.html', context)

    Esto verifica si la solicitud es una llamada AJAX y devuelve el resultado en formato JSON si lo es. De lo contrario, renderiza la plantilla HTML como de costumbre.

    Nota: Por defecto, Django incluye un token CSRF en el formulario HTML por razones de seguridad. Al hacer una llamada AJAX, necesitas incluir este token en los datos enviados al servidor. El código anterior incluye automáticamente el token con el método $('#myForm').serialize().

Comments are closed.