AJAX，PHP表单不提交到数据库

Question

我一直在试图让这个工作多年，并且已经阅读了很多类似问题的其他答案（How to add AJAX Submit to PHP validation and return message?，ajax submit form why it cannot echo $_POST），但我似乎无法得到它上班。

基本上我正在创建的是一个注册表单，它只是将某个人的电子邮件地址插入到表格的新行中，这样我就可以测量访问者的转换率了！事不宜迟，这里有我的剧本，我真诚地希望你能帮助我吧:)

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> 

send_post PHP：

<?php 
// Fetching Values From URL 
$servername = "*****"; 
$username = "*****"; 
$password = "*****"; 
$dbname = "email"; 
$email = $_POST['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 

mysqli_query($conn,"INSERT INTO email (email) 
VALUES ('$email')"); 


$conn->close(); 
?> 

JavaScript和AJAX：

//Submitting the form 
$('#signup-form').submit(function() { 
     $.ajax({type: "POST", 
       url: "send_post.php", 
       data: $("#signup-form"), 
       success: function() { 
       alert("success"); 
    } 
}); 
    e.preventDefault(); 
    return false; 
}); 

为了便于阅读，我只包含了一小部分JS代码，其中包含ajax位它。 PS。当我直接导航到send_post.php时，它会在数据库中创建一个空行。

Answer 1

你的数据应该是关键：value的形式发布权

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

Answer 2

我认为这是不够的请求数据设置为窗体对象：

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

您需要设置表单值显式或序列化表单对象。 参见例如Pass entire form as data in jQuery Ajax function以供参考。

Answer 3

有很多错在这里，仅举几例：

• 你是不是取消默认提交正确，e没有定义的事件。
• 你没有发送任何数据，你需要序列化表单并发送它，而不是表单对象本身。
• 你有一个SQL注入问题，你应该切换到准备好的语句和绑定的占位符。

Answer 4

尝试更新您的表格，使用Javascript：

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

所以$ _ POST [ '电子邮件']将达到你的PHP-后端为$ _ POST ['电子邮件。

Answer 5

删除的形式，以确保正常发送POST操作按钮时，不刷新页面，：

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

send_post.php：

$servername = "*****"; 
$username = "*****"; 
$password = "*****"; 
$dbname = "email"; 
$email = $_POST['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 

mysqli_query($conn,"INSERT INTO email (email) 
VALUES ('$email')"); 


$conn->close(); 
?> 

提交表单：

     $('#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部分中所做的更改。

Answer 6

有类似我的，但我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> 

jQuery的

$(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

<?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(); 
?>