AJAX传递价值混乱

时间:2015-05-26 06:34:17

标签: javascript php ajaxform

我一直在寻找一种通过按钮提交数据的方法,这样数据就可以在数据库中保存或更新,而无需重新加载。现在更新和插入数据工作。但是我使用了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>

3 个答案:

答案 0 :(得分:2)

您的点击处理程序中没有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) {

        }
    });
});

答案 1 :(得分:1)

在您的情况下,价值观没有通过。更重要的是,你尝试做的方式(?id = ...&amp; fname = ... etc)将用$ _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
 }
});

答案 2 :(得分:0)

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属性的字段都会自动与表单一起提交