链接Jquery创建活动表

时间:2019-05-21 18:18:12

标签: javascript php jquery

我无法将JQuery链接到我的文件。我想创建一个实时表以使用ajax,php和mysql显示和编辑数据库中的数据。我已经多次验证了代码,没有发现任何错误。

我的html(“名称:clase_zbor.php”)

    <?php 
    session_start();

    ?>

    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <link rel="stylesheet" href="style.css">
        <title>TravelTo</title>

    </head>

    <body>

     <section id="admin">
           <div class="container">
               <div class="table-responsive">
                   <h3 align="center"> Live table</h3>
                   <div id="live_data">   
                   </div>
               </div>
           </div>
        </section>

    </body>
    </html>


<script>

    $(document).ready(function(){
       function fetch_data()
          {
           $.ajax({
               url:"select.php",
               method:"POST",
               success:function(data){
                   $('#live_data').html(data);
               }
           });
       }

       fetch_data();
       $(document).on('click','#btn_add',function(){
           var nume_clasa= $('#nume_clasa').text();
           if(nume_clasa == ''){
               alert("Introdu numele clase");
               return false;
               }
           $.ajax({
               url:"insert.php",
               method:"POST",
               data:{nume_clasa:nume_clasa},
               dataType:"text",
               success:function(data){
                   alert(data);
                   fetch_data();
               }
           });
       });
    });

</script>

我的select.php文件:

<?php

   require('../../connect.php');

    $output='';
    $sql="select * from clasa order by id_clasa desc;";
    $result=mysqli_query($conn,$sql);
    $result_check=mysqli_num_rows($result);

    $output.='
        <div class="table-responsive">
            <table class="table table-striped text-center table-bordered">
                 <thead class="thead-dark">
                   <tr>
                      <th>ID</th>
                       <th>Nume_clasa</th>
                       <th>Action</th>
                      </tr>
                 </thead>';

if($result_check > 0){
    while($row=mysqli_fetch_array($result)){
        $output.='<td>'.$row["id_clasa"].'</td>
                <td class="nume_clasa" data-id1="'.$row["id_clasa"].'" contenteditable>'.$row["nume_clasa"].'</td>
                <td><button name="btn_delete" id="btn_delete" data_id2="'.$row["id_clasa"]'" >Delete</button></td>
            ';
    }

    $output.='<tr> 
                <td></td>
                <td id="nume_clasa" contenteditable></td>
                <td><button name="btn_add" id="btn_add" class="btn btn-xs btn-succes">+</button></td>
            </tr>';

}
else{
    $output.='<tr>
                <td colspan="3">Nu exista date</td>
                </tr>';
}

$output.='</table>
            </div>';
?>

我试图直接链接JQuery,而不下载JQuery文件。

1 个答案:

答案 0 :(得分:1)

php脚本似乎正在将所有html附加到$output变量中,但是最后它永远不会是echo $output,这将导致在响应中发送输出。照原样,您正在构建结果,而不对其执行任何操作。

在脚本末尾放置echo $output,以将响应返回给客户端。