表单提交和 preventDefault() 的问题

Question

我已经搜索了几个小时，试图找到解决我遇到的问题的方法。我有一个外部 jQuery 页面来向服务器提交表单数据。我试过使用 event.preventDefault，然后返回 false；但这些似乎都不起作用。此外，如果我在函数的第一行添加警报，它不会出现。

这里是formL的jQuery代码和HTML代码

$(document).ready(function() {
//----------------------------------------------------Sign up------------------------------------------------------------------
$('#signup-form').on('submit', function(event) {
    alert("This is working");
    event.preventDefault();

    var subData = {
        'username'      : $('suser').val(),
        'password'      : $('spass').val()
    };

    $.ajax({
        type        : 'POST', //define the HTTP verb we want to use
        url         : 'createUser.php', // url where we want to post
        data        : subData, // our data object
        dataType    : 'json' //what type of data we expect back from the     server
        })
    });
});


<form id="signup-form" action="createUser.php" method="post">
        <input class="username" id="suser" type="text" name="username" placeholder="username" required><br>
        <input class="password" id="spass" type="text" name="password" placeholder="password" required><br>
        <input class="password" id="spassconf" type="text" name="password-confirm" placeholder="confirm password" required><br>
        <input id="signup-submit" type="submit" value="Signup">
</form>

我尝试过使用 .submit( 和 .on('submit'，但似乎两者都不起作用。我很确定这是事件无法识别的问题，但我找不到适用的解决方案我。如果有帮助，我正在使用 chrome。

如果您需要任何其他代码，我很乐意提供。

编辑：按请求编写 PHP 代码

<?php

//get form fields into php variables
$username = $_POST['username'];
$password = $_POST['password'];

$serverName = "198.71.225.145";
$connectionInfo = array("Database"=>"Ironicism_database_project", "UID"=>"ironicism", "PWD"=>"Redhorsemagnet8*");

$conn = sqlsrv_connect($serverName, $connectionInfo);

if($conn===false) {
    echo "Connection could not be established.<br />";
    die( print_r( sqlsrv_errors(), true));
}

$sql = "INSERT INTO ironicism.users (username, password) VALUES ('$username', '$password')";


$stmt = sqlsrv_query( $conn, $sql);
if($stmt === false)
{
    echo "Data Could not be inserted.... working on that yo.<br />";
    die( print_r(sqlsrv_errors(), true));
}

?>

Answer 1

在您的代码中，您定义了一个表单action 和method 属性，它们足以处理提交操作。在这种情况下，您的表单提交后可能会刷新页面，因此您的 event.preventDefault() 无法正常工作。

从表单中删除表单action 和method 属性并查看结果。

 $(document).ready(function() {
//----------------------------------------------------Sign up------------------------------------------------------------------
$('#signup-form').on('submit', function(event) {
    alert("This is working");
    event.preventDefault();

    var subData = {
        'username'      : $('suser').val(),
        'password'      : $('spass').val()
    };

    $.ajax({
        type        : 'POST', //define the HTTP verb we want to use
        url         : 'createUser.php', // url where we want to post
        data        : subData, // our data object
        dataType    : 'json' //what type of data we expect back from the     server
        })
    });
});


<form id="signup-form">
        <input class="username" id="suser" type="text" name="username" placeholder="username" required><br>
        <input class="password" id="spass" type="text" name="password" placeholder="password" required><br>
        <input class="password" id="spassconf" type="text" name="password-confirm" placeholder="confirm password" required><br>
        <input id="signup-submit" type="submit" value="Signup">
</form>

Answer 2

1) 如果您不想在提交点击事件时刷新页面，只需将按钮类型从提交更改为按钮即可：

<input id="signup-submit" type="button" value="Signup">

2) 从表单标签中移除动作值

3) 获取按钮点击事件而不是提交事件：

$('button').on('click', function(event) { // change it
    alert("This is working");
    event.preventDefault();

    var subData = {
        'username'      : $('suser').val(),
        'password'      : $('spass').val()
    };

    $.ajax({
        type        : 'POST', //define the HTTP verb we want to use
        url         : 'createUser.php', // url where we want to post
        data        : subData, // our data object
        dataType    : 'json' //what type of data we expect back from the     server
        })
    });
});