Question

我正在尝试通过JavaScript创建一个http post请求。但是，当我单击提交时，页面刷新并且URL已更改。

我在false属性上返回onsubmit。所以在这个意义上它不应该是“提交”。

我的服务器也没有受到XHR请求的影响。

在：

后：

代码：

<form onsubmit="return test(this)">
    url:<br>
    <input type="text" id="url" name="url"><br>
    <input type="submit" value="Submit">
</form>

<script>
    function test(form) {
        var xhr = new XMLHttpRequest();

        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');

        xhr.open('POST', '127.0.0.1:3000/test', true);
        xhr.send(JSON.stringify({
            url: form.url.value
        }));

        xhr.onloadend = function() {
            // done
        };

        return false;
    }
</script>

我看不出它什么时候不起作用？

Answer 1

在浏览器的开发者工具中打开控制台。 阅读错误消息

VM125：5 Uncaught InvalidStateError：无法在'XMLHttpRequest'上执行'setRequestHeader'：对象的状态必须为OPENED。

因为它抛出异常，所以它永远不会达到return false

移动xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');，使其在 xhr.open('POST', '127.0.0.1:3000/test', true);

之后显示为

Answer 2

如果您在表单标记中放置类型提交的输入，它将重新加载。否则将其更改为按钮并按下按钮上的功能

<form>
    url:<br>
    <input type="text" id="url" name="url"><br>
    <button>Submit</button>
</form>

Answer 3

因为你想在onsubmit属性中总是有假，你可以像这样改进代码：

<form onsubmit="test(this); return false;">

有了这个改变，当你的xhr请求中的一切都很好时，它在语义上也会更好地返回true。（如果你想使用该函数在另一个地方发送数据。）

所以你的javascript变成了：

function test(form) {
    try {
        var xhr = new XMLHttpRequest();

        xhr.open('POST', '127.0.0.1:3000/test', true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        xhr.send(JSON.stringify({
           url: form.url.value
        }));

        xhr.onloadend = function() {
            // done
        };
    }catch(err){
        return false;
    }

    return true;
}

POST请求更改URL和刷新页面

3 个答案: