Javascript AJAX、PHP表单未提交到数据库

多年来，我一直在努力让它发挥作用，并阅读了许多类似问题的其他答案（，），但我似乎无法让它发挥作用

基本上，我试图创建的是一个注册表单，只需在表格的新行中插入某人的电子邮件地址，这样我就可以测量访问者的转化率！不用再多说，这是我的剧本，我真诚地希望你能帮我：）

HTML格式：

<!-- Signup Form -->
        <form id="signup-form" name="emailform" method="post" action="send_post.php">
            <input type="email" name="email" id="email" placeholder="Email Address" />
            <input type="submit" value="Sign Up" />
        </form> 
<script src="assets/js/main.js"></script>

为了可读性，我只包含了JS代码的一小部分，其中包含ajax位。

---

另外，当我直接导航到send_post.php时，它会在数据库中创建一个空行。

您的数据应该是key:value格式，以便正确发布

data: {email:$('#email').val()}

---

我认为将请求数据设置为表单对象是不够的：

data: $("#signup-form"),

您需要显式设置表单值或序列化表单对象。

---

参见例如，以供参考。

这里有很多错误，举几个例子：

• 您没有正确取消默认提交事件，

  e

  未定义
• 如果不发送任何数据，则需要序列化表单并发送该数据，而不是表单对象本身
• 如果存在sql注入问题，则应切换到准备好的语句和绑定的占位符

---

尝试更新您的表单Javascript:

    $('#signup-form').on('submit', function () {
    ...
    data: { email: $('#email').val() }
    ...

---

因此$\u POST['email']将以$\u POST['email]的形式到达您的PHP后端。

在发送正常的POST操作时，删除表单以确保按钮不会刷新站点：

<input type="email" name="email" id="email" placeholder="Email Address" />
<button id="signUpBtn">Sign up</button>
<script src="assets/js/main.js"></script>

提交表格：

                        $('#signUpBtn').on("click",function (e) {

                            $.ajax({
                                type: "POST",
                                url: "send_post.php",
                                data: { email: $("#email").val() },
                                success: function () {
                                    alert("success");
                                }
                            });
                            e.preventDefault(); 
                            return false;
                        });

---

这应该能奏效。请务必注意我在jQuery部分中所做的更改。

有一个与我类似的答案，但我的

php

部分非常安全，因此下面是代码

HTML

<form id="signup-form" name="emailform" >
 <input type="email" name="email" id="email" placeholder="Email Address" />
 <input type="button" id="signup" value="Sign Up" />
</form>

PHP

<?php
 // Fetching Values From URL
$servername = "*****";
$username = "*****";
$password = "*****";
$dbname = "email";
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);

//Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

//Insert the data
$stmt = $conn -> prepare("INSERT INTO email (email) VALUES (?)");
$stmt -> bind_param('s', $email);

if($stmt -> execute()){
    echo "Done";
}else{
    echo "Not added";
}

$conn->close();
?>

您的ajax请求工作正常吗？

var\u dump（$\u POST）

在您的PHP中，并查看它的输出。如果您想使用ajax，您必须在您的ajax请求中删除表单中的操作

$（“#email”）

应该是

$（“#email”）.val（）

我认为删除表单标记不是正确的方法。使用event.preventDefault可以轻松防止表单提交。删除表单标签还可以消除用户期望的典型行为，如按enter键提交表单。

                        $('#signUpBtn').on("click",function (e) {

                            $.ajax({
                                type: "POST",
                                url: "send_post.php",
                                data: { email: $("#email").val() },
                                success: function () {
                                    alert("success");
                                }
                            });
                            e.preventDefault(); 
                            return false;
                        });

<form id="signup-form" name="emailform" >
 <input type="email" name="email" id="email" placeholder="Email Address" />
 <input type="button" id="signup" value="Sign Up" />
</form>

$(document).ready(function (){
    $(document).on('click', '#signup', function (){
        $.ajax({
                url: "send_post.php",
                type: "POST",
                data: {
                        "emali": $("#email").val()
                    }
                success: function (response) {
                    alert("response");
                    }
               });
    })
})

<?php
 // Fetching Values From URL
$servername = "*****";
$username = "*****";
$password = "*****";
$dbname = "email";
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);

//Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

//Insert the data
$stmt = $conn -> prepare("INSERT INTO email (email) VALUES (?)");
$stmt -> bind_param('s', $email);

if($stmt -> execute()){
    echo "Done";
}else{
    echo "Not added";
}

$conn->close();
?>