AJAX 传值混乱

Question

我一直在寻找一种通过按钮提交数据的方法，这样数据就可以在数据库中保存或更新，而无需重新加载。现在可以更新和插入数据了。但是我使用了 dataString 一个 javaScript 变量。我想通过这个dataString变量post传递数据。但是当我从代码中删除该变量时，数据插入或更新仍然有效。那么这里的数据传递是如何工作的。

post 方法如何从我的 ajax 调用中获取数据。

<html>
   <title>Registration</title>

<body>
    <?php
    $servername = "localhost";
    $username = "root";
    $password = "nopass";
    $dbname = "registration_project";

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

// Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
    ?>
    <div style="width:350px">
        <div style="float:left;width:40%">
            Id:<br/><br/>
            First Name:<br/><br/>
            Last Name:<br/><br/> 
            Age:<br/><br/>
        </div>
        <div style="float:left;width:60%">
            <form action="" method="post">
                <input type="number" id="id_id" name="id" value=<?php
                if (isset($_POST['id']))
                    echo $_POST['id'];
                ?>><br /><br />
                <input type="text" id="id_fname" name="fname" value=<?php
                if (isset($_POST['fname']))
                    echo $_POST['fname'];
                ?>><br /><br />
                <input type="text" id="id_lname" name="lname" value=<?php
                if (isset($_POST['lname']))
                    echo $_POST['lname'];
                ?>><br /><br />
                <input type="number" id="id_age" name="age" value=<?php
                if (isset($_POST['age']))
                    echo $_POST['age'];
                ?>><br /><br />
                <input type="submit" id="id_submit" name="submit">
            </form>
        </div>
    </div>
    <script src="js/jquery-1.11.3.js"></script>
  </body>
</html>
<?php
if (isset($_POST['id']))
 echo $_POST['id'] . "<br/><br/>";
if (isset($_POST['fname']))
 echo $_POST['fname'] . "<br/><br/>";
if (isset($_POST['lname']))
 echo $_POST['lname'] . "<br/><br/>";
if (isset($_POST['age']))
 echo $_POST['age'] . "<br/><br/>";
?>

<?php
if (isset($_POST['submit'])) {
   $fname = $_POST['fname'];
   $lname = $_POST['lname'];
   $age = $_POST['age'];
   $sql = "select max(id) from registration";
   $result = $conn->query($sql);
    if ($result->num_rows > 0) {
    // output data of each row
     while ($row = $result->fetch_assoc()) {
        $id = $row["max(id)"];
     }
   } else {
    echo "0 results";
   }

   if ($id==$_POST['id']) {
     $id = $_POST['id'];
     $sql = "update registration set firstName='$fname', lastName='$lname',             age=$age where id=$id";
     mysqli_query($conn, $sql);
} else {
    $id=$_POST['id'];
    $sql = "Insert into registration(id,firstName,lastName,age) values($id,'$fname','$lname',$age)";
    mysqli_query($conn, $sql);
 }
}
mysqli_close($conn);
?>
<script>
    $("#id_submit").click(function(e) {
 var id = $("#id_id").val();
 var fname = $("#id_fname").val(); 
 var lname = $("#id_lname").val();
 var age = $("#id_age").val();
 var dataString = "id="+id+ '&fname='+fname+'&lname='+lname+'&age='+age;
 //console.log(dataString);
 $.ajax({
 type:'POST',
 data:dataString,
 url:'Registration.php',
 success:function(data) {

    }
  });
 });
</script>

Answer 1

您的点击处理程序中没有 e.preventDefault()。所以在AJAX调用发出后，表单也正常提交了。所以即使你不填写dataString，数据库也会从表格中更新

要使其仅使用 AJAX，您应该调用 e.preventDefault()。您还需要为 submit 参数提交一个值，因为 PHP 代码使用 if(isset($_POST['submit'])) 来知道它是否应该处理表单参数。

$("#id_submit").click(function(e) {
    e.preventDefault();
    var id = $("#id_id").val();
    var fname = $("#id_fname").val(); 
    var lname = $("#id_lname").val();
    var age = $("#id_age").val();
    var dataString = "submit=submit&id="+id+ '&fname='+fname+'&lname='+lname+'&age='+age;
    //console.log(dataString);
    $.ajax({
        type:'POST',
        data:dataString,
        url:'Registration.php',
        success:function(data) {

        }
    });
});

Answer 2

在你的例子中，值没有被传递。此外，您尝试做的方式（ ?id=...&fname=... 等）是用 $_GET.

传递它

你必须做类似的东西：

$.ajax({
   type:'POST',
   data: { id : $("#id_id").val(), 
       fname : $("#id_fname").val(), 
       lname : $("#id_lname").val(),
       age : $("#id_age").val()
   },
 url:'Registration.php',
 success:function(data) {
     // code
 }
});

Answer 3

But when I removed that variable from my code data insert or update was still working. So how the passing of data working here.

回答

当您删除 var dataString 时，所有具有 name 属性的字段都会与表单一起自动提交

AJAX 传值混乱

AJAX passing value confusion

javascript

php

ajaxform