使用javascript

时间:2018-12-08 17:53:04

标签: javascript php mysql

我有一个页面,其中包含具有所有行和列的数据库表。 我想做的是选择我想要的所有行,然后在我单击按钮时将其删除。

这是我到目前为止在table.php页面中所做的:

<?php 
include "config.php";  //connection to database 
incude "home.js"; 
$funcao="Select * from  palavras";
$result=mysqli_query($link, $funcao);
?>


 <button id="button_apaga" type="button" onclick="delete()" > DELETE </button>      

 <?php  if($result->num_rows > 0)  { ?>

  <table class="table">
      <tr>
          <th>IdPalavra</th>
          <th>Palavra</th>
          <th>Grau de Dificuldade</th>
          <th>Data</th>
          <th>Hora</th>
          <th>Selecionar</th>
      </tr>


    <?php while($row = mysqli_fetch_assoc($result)) { ?>

      <tr role="row">
        <td><?php echo $row['idpalavras']; ?></td>       
        <td><?php echo $row['palavra']; ?></td>
        <td><?php echo $row['graudificuldade']; ?></td>
        <td><?php echo $row['data']; ?></td>
        <td><?php echo $row['hora']; ?></td>
        <td><input type="checkbox" name="check" id="checkbox" /></td>
      </tr>
    <?php } ?>   
      </table> 

    <?php }
    else{
        echo "0 resultados";
    } ?>

JavaScript页面(home.js):

function delete(id){
    var check = document.getElementById('checkbox');
    if(check.checked) {
        // sql query 
    }

我的问题是考虑到它在不同的页面中,我该如何执行sql查询。我可以打开php并将查询放入里面吗?

我又如何接收从选定行到函数的所有ID? 预先谢谢你。

1 个答案:

答案 0 :(得分:0)

一种方法是使用AJAX。为了简化代码,我还将jQuery集成到此解决方案中。我也打算将您的复选框更改为单独的按钮链接,以减少代码量。同时删除多个文件的解决方案可能与此类似,但是由于您使用的是AJAX,因此对于用户来说这很容易实现。

修改table.php

<?php 
include "config.php";  //connection to database 
incude "home.js"; 
$funcao="Select * from  palavras";
$result=mysqli_query($link, $funcao);
?>

 <?php  if($result->num_rows > 0)  { ?>

  <table class="table">
      <tr>
          <th>IdPalavra</th>
          <th>Palavra</th>
          <th>Grau de Dificuldade</th>
          <th>Data</th>
          <th>Hora</th>
          <th>Selecionar</th>
      </tr>


    <?php while($row = mysqli_fetch_assoc($result)) { ?>

      <tr role="row" class="palavras_row">
        <td><?php echo $row['idpalavras']; ?></td>       
        <td><?php echo $row['palavra']; ?></td>
        <td><?php echo $row['graudificuldade']; ?></td>
        <td><?php echo $row['data']; ?></td>
        <td><?php echo $row['hora']; ?></td>
        <td><a href="javascript:void(0);" class="palavras_delete" data-id="<?php echo $row['idpalavras']; ?>">Delete</a></td>
      </tr>
    <?php } ?>   
      </table> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js?ver=3.3.1"></script>

<script type="text/javascript">
(function($) {
    $(document).on('click', '.palavras_row a.palavras_delete', function() {
        var _id = $(this).attr('data-id');
        var _row = $(this).parent().parent();
        $.ajax({
            url: 'delete.php',
            data: {
                idpalavras: _id
            },
            type: 'POST',
            dataType: 'json',
            success: function(__resp) {
                if (__resp.success) {
                    _row.remove(); // Deletes the row from the table
                }
            }
        });
    });
})(jQuery);
</script>

在与table.php相同的文件夹中创建一个新文件,并将其命名为delete.php

<?php
$idpalavras = filter_input(INPUT_POST, 'idpalavras', FILTER_SANITIZE_NUMBER_INT);
$success = false;
if ($idpalavras) {
    include "config.php";  //connection to database 
    $funcao="delete from palavras where idpalavras = " . $idpalavras;
    $result=mysqli_query($link, $funcao);
    $success = true;
}
header('Content-Type: application/json');
echo json_encode(array('success' => $success));

上面的解决方案将一个简单的命令发送到您的PHP后端,在该后端,PHP可以运行删除查询。您不能直接从javascript运行mysql命令,因为那是前端代码。

此代码是功能性解决方案,但已缩写;一个更完整的解决方案将对潜在错误进行更详细的处理(通过AJAX或处理您的删除查询)。它还应该在您的delete.php上具有一定的安全性,以确保未经授权的用户在未经适当许可的情况下无法删除记录。