preventDefault() 不能正常工作

Posted 2023-02-24

【中文标题】preventDefault() 不能正常工作

【英文标题】：preventDefault() doesn't work appropriately

【发布时间】：2021-10-02 20:38:52

【问题描述】：

今天我正在测试一个应用程序，但我的 preventDefault() 有问题，在我的计算机上它可以正常工作，并且在大多数用户中他们没有遇到任何问题，在测试它的 30 个用户中，有 2 个告诉我同样的错误，他们将它们发送到登录表单的 post 文件，它实际上将它们正确记录，因为在 JSON 类型数组中我确定 password_verify 是否正确或不与 ajax 通信，但它直接将它们重定向到insert_user.php 文件，并没有注意 preentDefault ()，也没有提交 AJAX 警报和重定向到它应该带它们的位置。

这是承载post请求的文件

    if (isset($_POST['login-value'])) 
    //die(json_encode($_POST));
    $correo = $_POST['login-email'];

    try 
        include_once 'funciones.php';
        $password = $_POST['login-pass'];
        $stmt = $conn->prepare("SELECT * FROM usuarios WHERE correo_usuario = ?");
        $stmt->bind_param("s", $correo);
        $stmt->execute();
        $stmt->bind_result($id_user, $nombre_user, $apellido_user, $correo_user, $password_user, $tipo, $status);
        if ($stmt->affected_rows) 
            $existe = $stmt->fetch();
            if ($existe) 
                if (password_verify($password, $password_user)) 
                    if ($status == 'activo') 
                        session_start();
                        $_SESSION['usuario'] = $correo_user;
                        $_SESSION['nombre'] = $nombre_user;
                        $_SESSION['id'] = $id_user;
                        $_SESSION['tipo'] = $tipo;
                        $respuesta = array(
                            'respuesta' => 'exito',
                            'usuario' => $nombre_user
                        );
                     else 
                        $respuesta = array(
                            'respuesta' => 'error'
                        );
                    
                 else 
                    $respuesta = array(
                        'respuesta' => 'error'
                    );
                
             else 
                $respuesta = array(
                    'respuesta' => 'error'
                );
            
        
        $stmt->close();
        $conn->close();
     catch (Exception $th) 
        echo "error: " . $th->getMessage();
    
    die(json_encode($respuesta));

这是带有AJAX和preventDefault()的js文件

    if (document.getElementById("login-user-form")) 
    document.getElementById("login-user-form").addEventListener('submit', function (e) 
        e.preventDefault();
        var datos = $(this).serializeArray();
        var correo = document.getElementById("login-email").value;
        var password = document.getElementById("login-pass").value;

        //Validaciones
        if (correo == "") 
            Swal.fire(
                'Error!',
                'Ingresa un correo válido',
                'error'
            )
         else 
            if (password == "") 
                Swal.fire(
                    'Error!',
                    'Ingresa una contraseña válida',
                    'error'
                )
             else 
                $.ajax(
                    type: $(this).attr('method'),
                    data: datos,
                    url: $(this).attr('action'),
                    dataType: 'json',
                    success: function (data) 
                        var resultado = data; 
                        if (resultado.respuesta =="exito") 
                            Swal.fire(
                                title: 'Correcto',
                                text: "Inicio de sesión correcto!",
                                icon: 'success',
                                showConfirmButton: false
                            )
                            setTimeout(function () 
                                window.location.href = 'index-app';
                            ,1000);
                         else 
                            Swal.fire(
                                'Error!',
                                'Usuario o contraseña incorrecto, intentalo de nuevo!',
                                'error'
                            )
                        
                    
                )
            
        
    );

让我有点困惑的是，为什么在 94% 的用户中我没有问题，而在这 2 中却有。

唯一不变的是那两个用户不在谷歌Chrome浏览器中工作，我不知道版本，因为他们是普通用户，没有经过任何类型的程序员测试。

【问题讨论】：

好吧，也许有一个 javascript 错误阻止添加事件侦听器。变量太多，甚至无法开始猜测问题。

这可以是比赛条件或任何基本情况。您是否尝试使用 Jquery addEventListener？我不认为后端代码在这里是相关的，所以也许试着解释一下这个事件监听器是在哪里设置的，或者你为什么需要检查 document.getElementById("login-user-form")

如果您通过 AJAX “提交”，为什么不删除提交按钮并仅使用常规元素？然后，您可以侦听该元素上的单击事件并使用 AJAX 来“提交”该表单数据

更新，该应用程序在同一设备上工作，但使用不同的网络，知道发生了什么

【参考方案1】：

您可以尝试：删除“e.preventDefault();”在这个脚本中

【参考方案2】：

我已经解决了，最后去掉事件“preventdeafult()”，并用php的header重定向，通过url添加错误信息并获取