使用 AJAX 更新数据库答案

【问题标题】：Updating database with AJAX使用 AJAX 更新数据库
【发布时间】：2019-12-14 18:07:56
【问题描述】：

所以我有一个车辆数据库，我制作了一个表格，用户可以在其中更新车辆信息，然后确认他/她是否要保存更改。问题是我觉得我仍然不了解 AJAX 是如何工作的，这就是我到目前为止所做的。

这是用户用来编辑车辆信息的表格。

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

这只是我在尝试更新数据库中的表之前编写的一些代码，用于测试它是否正常工作，但它没有打印变量，所以我假设它不工作。

<?php
extract($_POST);


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

如果有人可以告诉我我的错误，因为我仍然遇到 AJAX 问题，因为我是新手。我希望用户确认他/她是否要保存更改，然后通过 AJAX 更新我数据库上的表。

【问题讨论】：

首先检查 ajax 调用是否正常工作或不在浏览器中使用 f12 并检查网络或控制台部分。 ajax 工作与否。
您从 Ajax 发送此数据：data: {vehicleID : vehicleID, Manufacturer : Manufacturer} 然后，要在服务器上检索此数据，您需要找到键 vehicleID 和 Manufacturer 到 $_POST array，是的，是的，$_POST 是一个数组。例如：$vehicleID=$_POST["vehicleID"]; $manufacturer=$_POST["Manufacturer"]; echo $vehicleID; echo $manufacturer; 和测试：if(isset($_POST["Manufacturer"])) { //...} 你不需要为此使用extract。
试过不解压，还是不行。 @PriyankaSankhala 我可以更详细地说明如何使用控制台，因为我打开它并没有显示任何内容，所以我假设数据实际上没有被发送。
@QassimAli 首先在您的confirm_edit 函数中添加console.log("here inside function); 并检查您是否在控制台中收到文本，然后在其他情况下检查是否相同，如果遇到问题，请使用警报，首先调试执行控制的去向

标签： javascript php jquery html ajax

【解决方案1】：

您的代码过于复杂，因此更难理解和处理。

首先，不要通过查找每个表单输入的 ID 来声明每个表单输入，而应该只使用 jQuery 内置的 serialize() 函数，该函数将收集所有表单数据并制作一个更简单的字符串来使用。

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

另外，不要对用户数据使用提取（如 $_POST 或 $_GET），因为这是处理用户数据的极其不安全的方式。只需使用：

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

【讨论】：

我按照您的步骤将我的 ajax 数据更改为 $.ajax({ url: 'ajax.php', method: 'post', data: $('form').serialize(), success: function(data){ console.log(data); } }); 并 dd 我的 ajax 端代码像这样 if(isset($_POST['Model'])) { echo $Model; } 但我仍然没有打印任何内容。
echo $_POST['model'];
我也试过小写首字母，但还是不行。有什么理由需要小写吗？因为元素的 id 以大写字母开头。