簡體   English   中英

使用 Jquery Ajax PHP 提交表單

[英]Form Submit with using Jquery Ajax PHP

我知道有很多類似的問題,但我在這個完全相同的問題上工作了兩天,我只是放棄了。

所以在表單提交后,我想阻止當前頁面(updates.php)重定向到另一個頁面(test.php)。 我正在嘗試使用 Jquery Ajax 來做到這一點,但在這一點上,我願意接受任何解決方案。

更新.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>

測試.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。

試試這個作為你的 updates.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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM