Javascript 用AJAX更新数据库_Javascript_Php_Jquery_Html_Ajax

Javascript 用AJAX更新数据库

javascript php jquery html ajax

Javascript 用AJAX更新数据库,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,因此，我有一个车辆数据库，我制作了一个表单，用户可以更新车辆信息，然后确认是否要保存更改。问题是我觉得我仍然不理解AJAX是如何工作的，下面是Iv到目前为止所做的这是用户用来编辑车辆信息的表单 <html> <body> <table align = 'center' cellspacing='2'> <tr> <th> Enter Vehicle Information </th> <

因此，我有一个车辆数据库，我制作了一个表单，用户可以更新车辆信息，然后确认是否要保存更改。问题是我觉得我仍然不理解AJAX是如何工作的，下面是Iv到目前为止所做的

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

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


输入车辆信息
您的代码过于复杂，因此更难理解和处理
首先，您不应该通过查找每个表单输入的ID来声明它，而应该使用jQuery内置的serialize（）
函数，该函数将收集所有表单数据并生成一个更简单的字符串
$.ajax({
    data: $('form').serialize(),
    success: function(data){
        console.log(data);
    }
});

另外，不要对用户数据（如$\u POST或$\u GET）使用extract，因为这是一种极不安全的处理用户数据的方法。只需使用：
<?php
if(isset($_POST['manufacturer']))
{
    echo $manufacturer;
}
?>


首先检查ajax调用是否正常，在浏览器中使用f12
，然后检查网络或控制台部分。ajax是否工作。从ajax发送此数据：数据：{vehicleID:vehicleID，Manufacturer:Manufacturer}
，然后，要在服务器上检索此数据，您需要将密钥vehicleID
和Manufacturer
放入$\u POST
数组，是的，是的，$\u POST
是一个数组。例如：$vehicleID=$\u POST[“vehicleID”]$制造商=$_POST[“制造商”]；echo$vehicleID；echo$制造商对于测试：if（isset（$\u POST[“Manufacturer”]）{/…}
您不需要使用extract
进行测试。尝试时未进行提取，但仍无法工作。另外@PriyankaSankhala我可以得到更多关于如何使用控制台的说明吗？因为我打开了控制台，但没有显示任何内容，所以我假设数据没有实际发送。@QassimAli首先添加console.log（“此处为函数内部”）
在您的确认编辑
功能中，检查您是否在控制台中接收到文本，然后在其他if条件下检查相同的文本如果遇到问题，请使用警报，首先调试执行控制。我按照您的步骤，将我的ajax数据更改为$。ajax({url:'ajax.php'，method:'post'，data:$（'form'）.serialize（），success:function（data）{console.log（data）；}}}}
并像这样添加我的ajax代码，如果（isset（$\u post['Model']）{echo$Model；}
但我仍然没有得到任何打印的内容。echo$\u post['model']；我也尝试了小写的第一个字母，但它仍然不起作用。是否有任何理由需要小写？因为元素的id以大写字母开头。
<?php
if(isset($_POST['manufacturer']))
{
    echo $manufacturer;
}
?>