Question

我正在尝试使用AJAX制作动态评论插入系统，但我对表单有疑问：它甚至不会尝试执行javascript函数。相反，它只是执行GET操作并将我重定向到?user=&reply=&submit=Submit并且没有做任何事情。这是我的表单代码：

<form id="cmtsubmit" onsubmit="return submitComment(this);">
    <input type="text" name="user" id="user" />
    <textarea name="reply" id="reply"></textarea> 
    <input type="submit" name="submit" value="Submit" />
</form>

这是我的javascript代码：

function submitComment(form) {
    if (window.XMLhttpRequest) {
        httpRequest = new XMLhttpRequest();
    } else if (window.ActiveXObject) {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }

    httpRequest.onreadystatechange = function() {
            if(httpRequest.readyState === 4 && httpRequest.status === 200) {
                document.getElementById('container').innerHTML += '<div style="border: 1px solid; padding: 15px;">' + httpRequest.responseText + '</div>';
                return false;
            } else {

            }
    }

        httpRequest.open('GET', 'index.php?p=cmtinsrt&user=' + form.user.value + '&cmt=' + form.reply.value, true);
        httpRequest.send(null);

}

我哪里错了？

编辑：我添加了一个＆＃34;返回false＆＃34;代码，现在它可以在IE10中运行，但不适用于Firefox或Chrome。我还没有测试过任何其他浏览器，但很明显，如果它在这两个浏览器中不起作用，那么它不是一个合适的解决方案。

Answer 1

内联javascript事件必须返回false以防止发生默认操作。例如，如果您有锚标记：

<a onclick="somefunction();" href="http://www.google.com">Go</a>

将调用

someFunction，但浏览器也会转到Google。您已经获得了等式的第一部分，为了防止默认操作，您的内联事件应该是函数的 return ：

<form onsubmit="return someFunction(this);">

...但someFunction必须实际返回有效的内容。返回true，浏览器将继续执行默认操作。返回false，然后停止。

var someFunction =function (formElement) {
    // .. code
    return false; // prevents the form submit
}

如果你从javascript附加事件：

var ele = document.getElementById('myElement');
ele.addEventListener('click', someFunction);

...然后您还可以使用事件对象的preventDefault方法来停止默认操作：

var someFunction =function (e) {
    e.preventDefault();
    // .. code
    return false; // redundant if you preventDefault
}

显然，这不适用于内联事件的用例。即使处理程序函数中存在错误，这还有一个额外的好处，即停止默认操作。如果出现错误并且您正在使用内联事件，则永远不会达到return false语句，因此当您的函数发生爆炸时，默认操作会继续。

<强>文档

事件和处理程序 - https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Overview_of_Events_and_Handlers
Event object - https://developer.mozilla.org/en-US/docs/Web/API/Event
Event.preventDefault - https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

表单onsubmit被完全忽略

1 个答案: