Question

我下面有这段代码，只是表单提交中的一个简单事件，它发送xmlhttprequest

<form action="http://localhost/cn/account_test/index.php" method="post" onsubmit="login(this);">
    <label>Username</label><br>
    <input type="text" id="username" name="username"><br>
    <label>Password</label><br>
    <input type="password" id="password" name="password">
    <br>
    <button>Submit</button>
</form>

下面是我在提交时绑定到表单的登录功能

    function login(e){
        e.preventDefault();

        var $data = [];

        $data.push({ username : this.querySelector('#username').val()});
        $data.push({ password : this.querySelector('#password').val()});

        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

               document.getElementById("demo").innerHTML = xhttp.responseText;
            }
        };
        xhttp.open("POST", this.getAttribute('action'), true);
        xhttp.params($data);
        xhttp.send();

        return false;

    }

，但返回false或e.preventDefault（）均无效。有什么帮助吗，想法吗？

Answer 1

应该使用JavaScript设置事件侦听器，而不是使用内联JavaScript。

步骤1：删除内联JS并将ID添加到表单：

<form action="http://localhost/cn/account_test/index.php" method="post" id="form">

第2步：添加事件监听器，解决XMLHttpRequest使用不正确的问题

例如，xhttp.params($data);不是有效的函数，而是使用：

document.getElementById("form").addEventListener("submit", function(e) {
    e.preventDefault();

    var $data = [];

    $data.push({ username : document.getElementById('username').value });
    $data.push({ password : document.getElementById('password').value });

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            document.getElementById("demo").innerHTML = xhttp.responseText;
        }
    };

    xhttp.open("POST", this.getAttribute('action'), true);
    xhttp.send($data);
});

Answer 2

this是对表单对象的引用，该对象没有preventDefault方法。在event函数中传递login：

<form action="http://localhost/cn/account_test/index.php" method="post" onsubmit="login(event);">
  ...
</form>

Answer 3

您的代码中有2种：

按钮<button>Submit</button>缺少类型属性：

<button type="submit">Submit</button>

this

login(this)没有属性preventDefault。它指的是form元素。

您可以尝试为表单设置一个id并编写一个事件侦听器，如下所示：

document.getElementById("myForm").addEventListener("submit", login);

function login(e) {
    e.preventDefault();
    console.log('caught!');

    // more code goes here...
}

<form action="http://localhost/cn/account_test/index.php" method="post" id="myForm">
    <label>Username</label><br>
    <input type="text" id="username" name="username"><br>
    <label>Password</label><br>
    <input type="password" id="password" name="password">
    <br>
    <button type="submit">Submit</button>
</form>

Answer 4

使用结束

document.querySelector('#form').addEventListener('click',function(e){

e.preventDefault();

});

thx可以帮助您，

不允许表单提交，而是发送xmlHttpRequest

4 个答案: