Question

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

这是我的代码：的的Ajax

Bar

HTML

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

PHP

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

注意：我现在不想插入图像值。我将在以后修复此问题时插入它。

Answer 1

由于您使用的是带有提交按钮的表单，因此当您单击该按钮时，它将提交表单。您可能在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 2

您可能输入了'引号并且它已杀死您的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 3

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

更改

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

到

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

和

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

到

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

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

3 个答案:

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

3 个答案:

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