为什么此代码显示异常行为？ （表格未提交）

Question

我正在尝试使用 PHP 和 Ajax 提交表单。但问题是有时它会插入一个值，有时是 2，有时是全部，而现在它什么也没插入。为什么会这样？我该如何纠正？

这是我的代码： Ajax

$(document).ready(function(){
$("button").click(function(){
$.ajax({
    url: "submitform.php",
    type: "POST",
    data: $("form").serialize(),
    success: function(data){
        alert("well");
    },
    error: function(){
            alert("Error");
            }
        });
    });
 });

HTML

<form id="signupform" name="form1" method="post" enctype="multipart/form-data">
                    <table>
                      <tr>
                        <td><input type="text" name="name" placeholder="Enter your name" required /></td>
                        <td rowspan="3"><div class="propic"><img id="imgid" src="images/dp.png" /></div>
                          <input id="imgInput" type="file" name="image"/></td>
                      </tr>
                      <tr>
                        <td><input type="text" name="username" placeholder="Enter username" required /></td>
                      </tr>
                      <tr>
                        <td><input id="digits" type="text" name="phone" maxlength="10" placeholder="Enter your phone no." required /></td>
                      </tr>
                      <tr>
                        <td><input type="password" name="password" maxlength="12" placeholder="Enter password" required /></td>
                        <td><input id="button" type="submit" name="submit" value="Sign Up" /></td>
                      </tr>
</table>
</form>

PHP

<?php
$conn=mysqli_connect("localhost", "root", "", "winkcage");
//$im=$_SESSION["pathsession"];
$nam=""; $usernam=""; $phon=""; $pass="";
$nam=$_POST["name"];
$usernam=$_POST["username"];
$phon=$_POST["phone"];
$pass=$_POST["password"];
$signquery="INSERT INTO signup(name, username, phone, password) VALUES('$nam', '$usernam', '$phon', '$pass')";
$signqueryrun=mysqli_query($conn, $signquery);
?>

注意：我现在不想插入图像值。待此问题解决后，我将插入它。

Answer 1

您可能输入了' 引号，它杀死了您的sql 语句。这称为sql injection。为防止 sql 注入，您可以使用pdo prepared statements。您还需要hash passwords 以防止人们在他们访问您的数据库时窃取它们。哈希密码是一种易于检查的单向加密。

$pdo = new PDO("mysql:host=$db_host;dbname=$DB_name", $user, $pass);
$sql = "INSERT INTO signup(name, username, phone, password) VALUES(':name', ':username', ':phone', ':pass')";
if ($con = $pdo->prepare($sql)) {
    $con->execute([
        ':name' => $_POST["name"],
        ':username' => $_POST["username"],
        ':phone' => $_POST["username"],
        ':pass' => $_POST["password"]
    ]);
}

就 html 和 javascript 而言。用jquerys.submit()函数捕获提交的表单。

$('form').submit(function(e){
        e.preventDefault();
        $.post('submit.php',$(this).serialize(),function(response){
            alert('complete');
        }).error(function(){
            alert('wrong');
        });
    });

这样可以确保任何提交事件都会触发 ajax。

Answer 2

由于您使用的是带有提交按钮的表单，因此当您单击该按钮时，它将提交表单。您可能在 AJAX 操作和表单提交之间存在冲突。尝试阻止按钮单击的默认操作，看看它是否工作如下：

$(document).ready(function(){
$("#button").click(function(event){
if($("form").get()[0].checkValidity()){
  $.ajax({
      url: "submitform.php",
      type: "POST",
      data: $("form").serialize(),
      success: function(data){
          alert("well");
      },
      error: function(){
              alert("Error");
              }
          });
      });
    }
    event.preventDefault();
 });

Answer 3

您将 onclick 分配给一个按钮元素，但您的页面上没有按钮元素，您的按钮是一个输入元素。将其更改为按钮，它可能会起作用。我个人会建议使用 id 而不是元素类型，我认为它使事情更清晰，并且允许您拥有多个相同类型的元素而不会破坏您的代码。

改变

$("button").click(function(){

到

$("#button").click(function(){

和

data: $("form").serialize(),

到

data: $("#signupform").serialize(),