AJAX 传值混淆答案

【问题标题】：AJAX passing value confusionAJAX 传值混淆
【发布时间】：2015-05-26 06:34:17
【问题描述】：

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

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>

【问题讨论】：

您有语法错误，data: 之后什么都没有。这会阻止 Javascript 运行，因此以正常方式提交表单。
函数中还需要输入e.preventDefault()，防止正常提交表单。
好的，首先谢谢你。但是如果我使用e.preventDefault() 什么都不会发生。我的代码有什么问题。但如果我不使用它，那么更新和插入工作

标签： javascript php ajaxform

【解决方案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) {

        }
    });
});

【讨论】：

我尝试过使用e.preventDefault()，但插入和更新不起作用。我是 javaScript 新手，没有发现任何错误。
你在dataString中没有submit，我已经添加了。
非常感谢，我正是在寻找这个。这正在工作。

【解决方案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
 }
});

【讨论】：

谢谢我不知道。但如果我使用e.preventDefault()，它就不起作用。为什么？？？
你应该把你的 PHP 代码放在另一个文件中，你只会拥有它。 e.preventDefaut() 取消表单的默认操作（当前由您的当前页面处理）。

【解决方案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 完成还是由 php 代码负责。
这是<form action="" method="post"> 的动作部分。空操作意味着它将在同一页面上提交。
method="post" 表示表单值将从查询字符串中隐藏...... 987654326@ 是这个事件