表单数据不会通过 AJAX 通过 id 发送

Question

I want the following ajax request to process form data from form with "#next" id:我希望以下 ajax 请求处理来自具有“#next”id 的表单的表单数据：

$(function () {
    $("#next").on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: 'check_user.php',
            dataType: 'json',
            data: $('form').serialize(),
            success: function (response) {
                if(response['found'] === 'true') {
                    location.href = 'index.php';
                } else {
                    alert('Incorrect username or password');
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
});

And here's the file that contains the form:这是包含表单的文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/auth_style.css">
    <title>Authentication</title>
    <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
    <script src="js/authentication_ajax.js"></script>
    <noscript>JS is disabled. Enable js to continue</noscript>
</head>
<body>
<h1 id="header">Enter your data here</h1>

<form id="#next">
    <label for="login">Login</label>
    <input type="text" id="login" name="login" placeholder="Enter your login here" required><br>
    <label for="password">Password</label>
    <input type="password" id="password" name="password" placeholder="Enter your password here" required><br>
    <input type="submit" value="Log in">
</form>

<form id="#log_out" action="log_out.php" method="post">
    <button type="submit">Log out</button>
</form>
</body>

What's interesting is that when I used just $('form').on('submit', function (e) { it worked just fine.有趣的是，当我只使用$('form').on('submit', function (e) {它工作得很好。

Answer 1

You have two error the first one is how to use ids, in the id don't use # instead use just the name, and into the selector you can use $('#name') .你有两个错误，第一个是如何使用 id，在 id 中不要使用#而只使用名称，在选择器中你可以使用$('#name') 。 The second problem is about selector of serialize() , in this case you can use directly e.target like:第二个问题是关于serialize()的选择器，在这种情况下你可以直接使用e.target像：

 $(function() { $("#next").on('submit', function(e) { e.preventDefault(); console.log($(e.target).serialize()); /* $.ajax({ type: 'post', url: 'check_user.php', dataType: 'json', data: $(e.target).serialize(), success: function (response) { if(response['found'] === 'true') { location.href = 'index.php'; } else { alert('Incorrect username or password'); } }, error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown); } }); */ }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1 id="header">Enter your data here</h1> <form id="next"> <label for="login">Login</label> <input type="text" id="login" name="login" placeholder="Enter your login here" required><br> <label for="password">Password</label> <input type="password" id="password" name="password" placeholder="Enter your password here" required><br> <input type="submit" value="Log in"> </form> <form id="log_out" action="log_out.php" method="post"> <button type="submit">Log out</button> </form>

表单数据不会通过 AJAX 通过 id 发送

问题描述

1 个解决方案

解决方案1
1 2022-11-25 10:07:34

表单数据不会通过 AJAX 通过 id 发送

问题描述

1 个解决方案

解决方案1 1 2022-11-25 10:07:34

解决方案1
1 2022-11-25 10:07:34