Question

我正在开发一个网站，并试图使其尽可能地具有交互性，因此页面重新加载或重定向的可能性最小。

我需要通过POST方法提交表单：

<form method = "post" id = "form"> 
        #<Text Inputs>
        <input type = "submit" class = "form-control" onclick = "post_to_url('/url/', $('#form').serialize()); ">
</form>

我正在使用此代码通过XMLHttpRequest

提交

function post_to_url(url, content){
    const xhr = createXmlHttpRequestObject();

    xhr.onload = function () {
        console.log(xhr.responseText);
    };

    xhr.open('POST', url, true);
    xhr.setRequestHeader("Content-type", url + "x-www-form-urlencoded"); 
    xhr.send(content); 
}

function createXmlHttpRequestObject(){
    var xmlHttp;
    if (window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }else{
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    return xmlHttp;
}

我的问题是，即使使用此代码，页面仍会重新加载。在后端，如果我的应用程序（使用Python Flask重定向到我所请求的页面，则该页面将重新加载。如果应用程序返回响应文本，浏览器将定向到我要发布到的URL，并在页面本身中显示响应文本。

我看过一个w3schools Try It example，它发出发帖请求的方式与我相同。在这里，请求显然是在后台完成的，而不会影响浏览网站的客户端看到的界面。

所以我想知道：我错过了什么吗？根据服务器的响应方式，XMLHttpRequest是否有不同的过程？欢迎任何答案，我们将认真考虑。

Answer 1

页面重新加载实际上与JavaScript无关。

您正在点击表单内的提交按钮！

现代JavaScript会使用JS（而不是使用HTML的提交按钮click事件）将事件处理程序绑定到表单的Submit事件。

然后您可以阻止表单提交的默认行为。

const form = document.querySelector("form");
form.addEventListener("submit", form_handler);
function form_handler(event) {
    event.preventDefault(); // Don't submit the form normally
    post_to_url('/url/', $(this).serialize()); 
}

请编写服务器端代码以处理常规表单提交when the JS fails。这是best practice。

xmlhttprequest.open（）不应重新加载页面或直接指向请求的URL

1 个答案: