javascript - 使用 Jquery Ajax PHP 提交表单

标签 javascript php jquery html ajax

我知道有很多类似的问题,但我花了两天时间来解决这个完全相同的问题,然后我就放弃了。

所以提交表单后,我想阻止当前页面(updates.php)重定向到另一个页面(test.php)。 我正在尝试使用 Jquery Ajax 来做到这一点,但在这一点上,我愿意接受任何解决方案。

updates.php:

<form action="test.php" method="post">                          
    <div class="row form-group">
        <div class="col-md-12">
            <label class="sr-only" for="name">Name</label>
            <input type="text" id="name" name="name" class="form-control" style="background:white;opacity:.5;border:none;" placeholder="Name:" required>
        </div>
    </div>

    <input type = "hidden" id="id" name = "id" value = "4" />

    <div class="row form-group">
        <div class="col-md-12">
            <label class="sr-only" for="subject">Comment</label>
            <input type="text" name="subject" id="subject" class="form-control" style="background:white;opacity:.5;border:none;" placeholder="Write a comment..." required>
        </div>
    </div>
    <div class="form-group">                                
        <input type="submit" value="Post Comment" class="btn btn-primary">                                                                          
    </div>
</form>

test.php:

<?php

$id = $_POST['id'];
$username = $_POST['name'];
$comment = $_POST['subject'];

if(!empty($username) || !empty($comment))
{

    $conn = mysqli_connect('localhost','Admin','admin123','website');

    if(!$conn)
    {
        echo "Connection Error: " . mysqli_connect_error();
    }
    else
    {
        $INSERT = "INSERT INTO comments (id, name, comment) VALUES (?,?,?)";

        $stmt = $conn -> prepare($INSERT);
        $stmt -> bind_param("iss", $id, $username, $comment);
        $stmt -> execute();
    }

}
else { echo "All fields are required"; die();}

?>

无论我做什么,我都无法阻止 test.php 打开。

最佳答案

尝试将此作为 update.php 文件:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
            function submitWithAjax(){
                var name = document.getElementById("name").value;
                var id = document.getElementById("id").value;
                var subject = document.getElementById("subject").value;

                $.post( "test.php", {name: name, id: id, subject: subject})
                .done(function(data) {
                    alert( "Data Loaded: " + data );
                });
            }
        </script>
    </head>
    <body>
        <form>                          
            <div class="row form-group">
                <div class="col-md-12">
                    <label class="sr-only" for="name">Name</label>
                    <input type="text" id="name" name="name" class="form-control" style="background:white;opacity:.5;border:none;" placeholder="Name:" required>
                </div>
            </div>

            <input type = "hidden" id="id" name = "id" value = "4" />

            <div class="row form-group">
                <div class="col-md-12">
                    <label class="sr-only" for="subject">Comment</label>
                    <input type="text" name="subject" id="subject" class="form-control" style="background:white;opacity:.5;border:none;" placeholder="Write a comment..." required>
                </div>
            </div>
            <div class="form-group">                                
                <input type="submit" value="Post Comment" class="btn btn-primary" onclick="event.preventDefault();submitWithAjax();">                                                                          
            </div>
        </form>
    </body>
</html>

关于javascript - 使用 Jquery Ajax PHP 提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59122074/

相关文章:

javascript - React - 无法对已卸载的组件执行 React 状态更新

javascript - 是否可以通过 Tampermonkey 脚本修改响应 header ?

php - MySQL 自内连接和搜索

javascript - 使用 ajax、php、html 进行 POST

javascript - 为什么我的 javascript 不会影响 bootstrap carousel

javascript - javascript 中的变量传递不会出现在 vue.js 标签中

javascript - 如何使用 express、axios 和 react 更新 json 文件?

php - Paypal IPN - 通知网址

php - 如何将 codeigniter 函数名称引用为 native php 函数的回调?

javascript - pdf渲染时显示加载图像