PHP 表单提交到 MySQL，无需刷新/重定向-6ren

PHP 表单提交到 MySQL，无需刷新/重定向

转载作者：行者123 更新时间：2023-11-29 11:05:17

在我的一生中，我无法让 Ajax 请求工作并在不刷新的情况下提交我的 HTML 表单，我只是从来没有能够使用 Ajax。我希望我的表单运行 register.php 而不刷新或重定向到另一个页面。理想情况下，我想在 div 或其他内容中添加“您已注册”消息，但现在我只想提交表单而不刷新。

这是我的 HTML:

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Social Media</title>
    <script src="jquery-3.1.1.min.js"></script>
    <script src="register.js"></script>
    </head>
    <body>

    <span id='messasge'></span>    

    <form id='register_form' method='post' action='register.php'>
        First: <input type='text' name='first_name' maxlength='30' required='required'><br>
        Last: <input type='text' name='last_name' maxlength='30' required='required'><br>
        Email: <input type='text' name='email' maxlength='60' required='required'><br>
        Password: <input type='password' name='password' maxlength='60' required='required'><br>
        <input type='submit' id='register_user' name='register' value='Register'>
    </form>

        <br>

    <form id='login_form' action='login.php'>
        Email: <input type='text' name='email' maxlength='60' required='required'><br>
        Password: <input type='password' name='password' maxlength='60' required='required'><br>
        <input type='submit' name='login' value='Log In'>
    </form>

    </body>     

    </html>

此处的 register.php 发送表单:

require_once 'connect.php';

// Salt for Hasing Password
$salt = '$kl._';
$pepper = 'l*&s';

// Sanative Input Completely
function sanitizeString($conn, $var) {
$var = stripslashes($var);
$var = strip_tags($var);
$var = htmlentities($var);
$var = $conn->real_escape_string($var);
return $var;
}

// Format Name w/ Only Capital First Letter
function formatName($var) {
$var = strtolower($var);
$var = ucwords($var);
return $var;
}

if(isset($_POST['register'])) {

$first_name = sanitizeString($conn, formatName($_POST['first_name']));
$last_name = sanitizeString($conn, formatName($_POST['last_name']));
$email = sanitizeString($conn, $_POST['email']);
$password = hash('ripemd128', $salt . $_POST['password'] . $pepper);

$stmt = $conn->prepare('INSERT INTO users (first_name, last_name, email, password)VALUES(?, ?, ?, ?)');
$stmt->bind_param('ssss', $first_name, $last_name, $email, $password);
$stmt->execute();

$stmt->close();
$conn->close();

}?>

JavaScript

$('#register_user').click(function() { 
    $.post( $("#register_form").attr("action"), 
    $("#register_form :input").serializeArray(), function(info) {
        $("#message").html(info); 
    }); 
}); 
$("#register_user").submit(function() { return false; });

最佳答案

您需要捕获提交事件并返回 false。将您的 jQuery 替换为:

   $(function() {
        $('#register_form').submit(function(event) {
            event.preventDefault(); 
            $.post( $("#register_form").attr("action"), 
            $("#register_form :input").serializeArray(), function(info) {
                $("#message").html(info); 
            }); 
        });
    });

了解更多关于 preventing default event actions和 jQuery AJAX Basics 。在排除故障时，请确保在浏览器的开发人员工具中观察 AJAX 请求/响应。

<小时/>

自从您在文档开头加载 jQuery 以来，我已经编辑了代码以在 jQuery 代码周围添加文档就绪处理程序。这实质上使 jQuery 等待运行，直到整个文档加载完毕。

关于PHP 表单提交到 MySQL，无需刷新/重定向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41515094/