插入mysql数据库而不使用ajax刷新页面不起作用答案

【问题标题】：insert into mysql database without refreshing page using ajax not working插入mysql数据库而不使用ajax刷新页面不起作用
【发布时间】：2017-06-20 11:34:16
【问题描述】：

我尝试在不刷新页面的情况下将一些数据插入到 mysql db 表中所以我编写了这个脚本来将数据发送到一个 php 页面，该页面包含将通过单击提交按钮执行的查询，成功函数被执行“”输入字段变为空“”但 php 文件似乎没有被执行

   <?php
    $idst=$_GET['idst'];
    $idusr = $_SESSION['user_session'];
    $auth_user->viewReservations($idst,$idusr);
    ?>
    <!--******* add reservation ******-->    
    <tr>     
      <form >
            <td><input required type="text" id="client" name="title"></td>
            <td><input required type="text" id="tel" name="tel"></td>
            <td><input required type="date" id="start" placeholder="yy-MM-dd" 
            name="start"></td>
            <td><input required type="date" id="end" placeholder="yy-MM-dd" 
            name="end"></td>  
            <td><input required type="number" id="prix" name="prix"></td>
            <td></td>
            <td><input type ="submit" id="submit_reservation" class="btn btn-
 info" 
            name="submit" value="ajouter" style="width: 70px"></td>
            <td></td>
       </form>
          </tr>
         </table>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script>
    $(document).ready(function(){
    $("#submit_reservation").click(function()
    {
    var client =$("#client").val();
    var tel =$("#tel").val();
    var start =$("#start").val();
    var end =$("#end").val();
    var prix =$("#prix").val();
    var idst=<?php echo json_encode($idst); ?>;
    var idusr=<?php echo json_encode($idusr); ?>;
    $. ajax(
    {
    url: "addreserv.php",
    type: "POST",
    cache: false,
    data: {
    "done": 1,
    "client" :client,
    "tel" : tel,
    "start": start,
    "end": end,
    "prix":prix,
    "idst":idst,
    "idusr":idusr
    },
    success: function(data)
    {
    $("#client").val('');
    $("#tel").val('');
    $("#start").val('');
    $("#end").val('');
    $("#prix").val('');
    }
    })
    });
    });
    </script>

这是使用从该页面发送的数据执行查询的 php 文件

<?php
/*require_once("session.php");*/
require_once("class.user.php");
if (isset($_POST['done']))
{
$adder = new USER();
$client=$_POST['client'];
$tel=$_POST['tel'];
$start=$_POST['start'];
$end=$_POST['end'];
$prix=$_POST['prix'] ;
$idst=$_post['idst'];
$idusr = $_POST['idusr'];
$adder->addReservation($client,$tel,$start,$end,$prix,$idst,$idusr);
}
?>

【问题讨论】：

控制台有错误吗？？
submit 类型没有点击事件
在你的`returnedresult = $adder->addReservation...`中设置返回值，检查数据是否插入，然后在addreserv.php type结尾echo returnedresult;然后 ajax 调用 set console.log(data) 并在控制台中查看结果
您忽略了取消提交处理程序中的事件默认操作，因此浏览器以“正常”方式提交表单......并且由于您没有为表单指定操作，在这种情况下这意味着它将简单地“重新加载”页面。
@MasivuyeCokile $("#submit_reservation").click(function() 是您正在寻找的点击。

标签： javascript php ajax

【解决方案1】：

在表单中添加 id 并阻止表单提交。

<tr>     
  <form id="reservation_form">
        <td><input required type="text" id="client" name="title"></td>
        <td><input required type="text" id="tel" name="tel"></td>
        <td><input required type="date" id="start" placeholder="yy-MM-dd" 
        name="start"></td>
        <td><input required type="date" id="end" placeholder="yy-MM-dd" 
        name="end"></td>  
        <td><input required type="number" id="prix" name="prix"></td>
        <td></td>
        <td><input type ="submit" id="submit_reservation" class="btn btn-info" 
        name="submit" value="ajouter" style="width: 70px"></td>
        <td></td>
   </form>
</tr>

$("#reservation_form").submit(function(event){
  event.preventDefault();
... Your logic ...

}

【讨论】：