使用 AJAX 更新数据库

Question

So I have a database of vehicles and I made a form where a user can update the information of vehicles and then confirming if he/she wants to save the changes.所以我有一个车辆数据库，我制作了一个表格，用户可以在其中更新车辆信息，然后确认他/她是否要保存更改。 Problem is I feel like I am still not understanding how AJAX works and here's what Iv done so far.问题是我觉得我仍然不理解 AJAX 是如何工作的，这是到目前为止 Iv 所做的。

This is the form the users use to edit a vehicles information.这是用户用来编辑车辆信息的表格。

<html>
<body>
<table align = 'center' cellspacing='2'>
    <tr>
        <th> Enter Vehicle Information </th>
    </tr>

    <form enctype = 'multipart/form-data' method = 'post' action = '' >
    <?php
  if($v = $Vehicle->fetch())
  {
  ?>
  <input type = "hidden" id='vID' value = '<?php echo $v['Vehicle_N'];?>'/>

  <img src = "Vehicles/<?php echo $v['Image']?>"  height = 100 width = 100 > </img>
    <tr>
        <td>Vehicle Manufacturer
      <select id = "Manufacturer" value = '<?php echo $v['Manufacturer'];?>'>
        <?php
                foreach($Manu as $m)
        {?>
          <option value = '<?php echo $m['Manufacturer'] ?>'> <?php echo $m['Manufacturer'] ?></option>
        <?php
        }
        ?>
                <option> <a href='test.php'> + Add New</a></option>
            </select>
    </td>
    </tr>

    <tr>
        <td>Vehicle Model <input id = "Model" value = '<?php echo $v['Model'];?>'/> </td>
    </tr>

    <tr>
        <td> Model Year <input type = 'number' id = "modelYear" min='1990' max='2020' value = '<?php echo $v['Model_Year'];?>'/> </td>
    </tr>

    <tr>
        <td> State of Vehicle <input id = "State" value = '<?php echo $v['State'];?>'/> </td>
    </tr>

    <tr>
        <td> Color <input id = "Color" value = '<?php echo $v['Color'];?>'/> </td>
    </tr>

    <tr>
        <td>
            Vehicle Type
            <select id = "Type" value = '<?php echo $v['Type'];?>'>
        <?php
                foreach($vehicleTypes as $vt)
        {?>
          <option value = '<?php echo $vt ?>'> <?php echo $vt ?></option>
        <?php
        }
        ?>
            </select>
        </td>
    </tr>

  <tr>
        <td> License plate No. (If there is one) <input type = 'number' id = "licensePlate" value = '<?php echo $v['License_Plate_N'];?>' /> </td>
    </tr>

  <tr>
        <td> Sale Price <input type = 'number' id = "salePrice" value = '<?php echo $v['Sale_Price'];?>'/> </td>
    </tr>

  <tr>
        <td> Rent Price <input type = 'number' id = "rentPrice" value = '<?php echo $v['Rent_Price'];?>'/> </td>
    </tr>

  <tr>
        <td> Stock <input type = 'number' id = "Stock" value = '<?php echo $v['Stock'];?>' /> </td>
    </tr>


  <tr>
        <td><p>Vehicle Description<textarea  id="Description"  rows="2"  cols="18" > <?php echo $v['Description'];?> </textarea></p> </td>
    </tr>

    <tr>
        <td>Vehicle Image <input id = "i" type = 'file'  /> </td>
    </tr>

    <tr>
        <td> <a href = '#' data-role = "update" data-id = "<?php echo $v['Vehicle_N'];?>" Onclick="confirm_edit()"> Update </a> </td>
    </tr>
<?php
}
 ?>
</form>
</table>

<script>

function confirm_edit(){
    if(confirm("Save changes?") === true){
        var vehicleID = document.getElementById("vID");
        var Manufacturer = document.getElementById("Manufacturer");
        var Model = document.getElementById("Model");
        var modelYear = document.getElementById("modelYear");
        var State = document.getElementById("State");
        var Color = document.getElementById("Color");
        var Type = document.getElementById("Type");
        var salePrice = document.getElementById("salePrice");
        var rentPrice = document.getElementById("rentPrice");
        var Stock = document.getElementById("Stock");
        var i = document.getElementById("i");
        var Description = document.getElementById("Description");

        $.ajax({
          url: 'ajax.php',
          method: 'post',
          data: {vehicleID : vehicleID, Manufacturer : Manufacturer},
          success: function(response){
            console.log(response);
          }
        });
    }else{
        return false;
   }
}
</script>

This is just some code I wrote to test if it is working before I try updating the table in my database, but it is not printing the variable so I am assuming it is not working.这只是我在尝试更新数据库中的表之前编写的一些代码，用于测试它是否正常工作，但它没有打印变量，所以我假设它不工作。

<?php
extract($_POST);


if(isset($Manufacturer))
{
  echo $Manufacturer;
}
?>

If someone can show me my mistakes because I am still having trouble with AJAX because I am new to it.如果有人可以告诉我我的错误，因为我仍然在使用 AJAX 时遇到问题，因为我是新手。 I want the user to confirm if he/she wants to save the changes then through AJAX update the table on my database.我希望用户确认他/她是否要保存更改，然后通过 AJAX 更新我数据库中的表。

Answer 1

You over-complicated your code and therefore it makes it much harder to understand and handle.您使代码过于复杂，因此更难理解和处理。

First of all, instead of declaring every form input by finding it's ID, you should just user jQuery's built in serialize() function, which will collect all of the form data and make a simpler string to work with.首先，不是通过查找 ID 来声明每个表单输入，您应该只使用 jQuery 内置的serialize()函数，它将收集所有表单数据并制作一个更简单的字符串来使用。

$.ajax({
    data: $('form').serialize(),
    success: function(data){
        console.log(data);
    }
});

Also, do not use extract on user data (like $_POST or $_GET) since it is extremely insecure way to handle user data.此外，不要对用户数据使用提取（如 $_POST 或 $_GET），因为它是处理用户数据的极其不安全的方式。 Simply use:只需使用：

<?php
if(isset($_POST['manufacturer']))
{
    echo $manufacturer;
}
?>

使用 AJAX 更新数据库

问题描述

1 个解决方案

解决方案1
0 2019-12-14 10:07:56

使用 AJAX 更新数据库

问题描述

1 个解决方案

解决方案1 0 2019-12-14 10:07:56

解决方案1
0 2019-12-14 10:07:56