HTML元素动态

Question

我制作了一个输入号字段，并希望动态渲染在容器中的值，而无需重新加载页面。我为此使用了Ajax，但我仍然必须重新加载页面。

HTML：

        <form method="post">
            <div class="main">
                <label for="numb">Parcour</label><br><br>
                <input type="number" id="numb" min="1">
            </div>
            <div class="main" style="display: block;">
                <section id="erstellen">
                    
                </section>
            </div>
        </form>

JS：

    const xhr = new XMLHttpRequest();
    xhr.open("POST","dynamisch_ajax.html", true);

    xhr.onload = () => {
        if(xhr.status === 200)
        {
            $('#erstellen').html($('#numb').val())
        } else {
            alert('Irgendetwas past nicht')
        }
    }

    xhr.send();

Answer 1

您必须使用预防违规方法来防止默认刷新：

$("form" ).submit(function( event ) {
  event.preventDefault();
  // The rest of the work
});