ボタン上の表の行を削除クリックAjaxの使用

Question

SKUグループ、Group_ID、編集ボタン、および削除ボタンの4つの列を持つHTML表があります。私は現在、削除機能に取り組んでいるので、削除ボタンを押すたびに確認ボックスがポップアップし、「OK」を押すと、行が削除され、データベースから削除される削除クエリが送信されるようにします。

私は、Ajaxと別のPHPスクリプトを削除クエリに使用することを知っていますが、それを理解できないようです。どんな助けもありがとう！削除ボタン用

HTML：

<td><input type="button" class="delete" name="delete" value="Delete" onclick="deleteRow(this)"></td> 

JavaScriptが...私は、これはいくつかの作業を必要と知っているが、私の質問のためにそれを掲示しています：

function deleteRow(r) { 

if (confirm('Are you sure you want to delete this entry?')) { 
    var i = r.parentNode.parentNode.rowIndex; 
    document.getElementById("skuTable").deleteRow(i); 
    } 



    request = $.ajax({ 
     type: "POST", 
     url: "delete.php", 
     data: i 
    }); 


     request.done(function (response, textStatus, jqXHR){ 
      if(JSON.parse(response) == true){ 
      console.log("row deleted"); 
      } else { 
      console.log("row failed to delete"); 
      } 
     }); 

     // Callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown){ 
      // Log the error to the console 
      console.error(
       "The following error occurred: "+ 
       textStatus, errorThrown 
      ); 
     }); 

     // Callback handler that will be called regardless 
     // if the request failed or succeeded 
     request.always(function() { 

     }); 


} 

delete.php：

<?php 

    $SKU_Group = $_POST['SKU Group']; 
    $Group_ID = $_POST['Group_ID']; 

    $host="xxxxxx"; 
    $dbName="xxxxxx"; 
    $dbUser="xxxxxxxxxxxxxx"; 
    $dbPass="xxxxxxxxxxx"; 

    $pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass); 

    $delete = "DELETE FROM SKU_Group_Dim WHERE Group_ID = '$Group_ID'"; 

    $stmt = $pdo->prepare($delete); 
    $result = $stmt->execute(); 
    echo json_encode($result); 
    if(!$result) { 
     echo json_encode(sqlsrv_errors()); 
    } 

?> 

Answer 1

JavaScript

まず、jQueryを使用していることに気づいたので、それを最大限に活用してみてはいかがですか？

まず、.deleteボタンのイベントハンドラをonclick作成します。

$('.delete').click(function() { 
    // do something when delete button is clicked 
}); 

あなただけのユーザーがを確認したとが正常にデータベースから削除された後の行を削除したいです。

if (confirm('Are you sure you want to delete this entry?')) { 
    // shorter call for doing simple POST request 
    $.post('delete.php', data, function (response) { 
     // do something with response 
    }, 'json'); 
    //^to indicate that the response will be of JSON format 
} 

しかし、我々は、削除するレコードを知っているように、何dataが$.post()に渡す必要がありますか？おそらく、私たちが削除したいレコードのIDです。

HTML

あなたがHTMLの多くを投稿していないとして、あなたは以下のようにあなたのテーブルに構築想定してみましょう：あなたは簡単に見つけてのIDにアクセスできるように

<table class="skuTable"> 
    <tr> 
     <td>123</td><!-- sku group --> 
     <td>456</td><!-- group id --> 
     <td><input type="button" class="edit" name="edit" value="Edit" ... ></td> 
     <td><input type="button" class="delete" name="delete" value="Delete" onclick="deleteRow(this)"></td> 
    </tr> 
    <!-- more similar records --> 
</table> 

変更をあなたのセルにクラスを追加するなどしてグループを作成します。あなたは簡単に通過することにより、関連したIDを見つけることができます（私たちはすでに、あなたは、もはやあなたの.deleteボタンのonclick属性を使用する必要があり、onclickハンドラを作成していないので。）

<table class="skuTable"> 
    <tr> 
     <td class="skuGroup">123</td> 
     <td class="groupId">456</td> 
     <td><input type="button" class="edit" name="edit" value="Edit" ... ></td> 
     <td><input type="button" class="delete" value="Delete"></td> 
    </tr> 
    <!-- more similar records --> 
</table> 

のJavaScript（再び）

jQueryを使用します。今一緒にすべてを置くために：

$('.delete').click(function() { 
    var button = $(this), 
     tr = button.closest('tr'); 
    // find the ID stored in the .groupId cell 
    var id = tr.find('td.groupId').text(); 
    console.log('clicked button with id', id); 

    // your PHP script expects GROUP_ID so we need to pass it one 
    var data = { GROUP_ID: id }; 

    // ask confirmation 
    if (confirm('Are you sure you want to delete this entry?')) { 
     console.log('sending request'); 
     // delete record only once user has confirmed 
     $.post('delete.php', data, function (res) { 
      console.log('received response', res); 
      // we want to delete the table row only we received a response back saying that it worked 
      if (res.status) { 
       console.log('deleting TR'); 
       tr.remove(); 
      } 
     }, 'json'); 
    } 
}); 

をPHP

人々がプリペアドステートメントを使用した理由の一つは、攻撃を防ぐためです。あなたがそれを使いこなしてみましたが、それを正しく使用していないのは良いことです（Jayのコメントを読んでください）。 変数をSQLのパラメータにバインドする必要があります。これを行うには、PDOStatement::execute()関数内の変数の配列を渡します。

レコードを削除すると、影響を受けたレコードの数をPDOStatement::rowCount()でチェックしてレコードが正常に機能しているかどうかをチェックします。

私は​​が働いたかどうかを確認する理由は一度もありません。

<?php 
error_reporting(E_ALL); 
ini_set('display_errors', 1); 

//$SKU_Group = $_POST['SKU Group']; 

$Group_ID = $_POST['Group_ID']; 

$host="xxxxxx"; 
$dbName="xxxxxx"; 
$dbUser="xxxxxxxxxxxxxx"; 
$dbPass="xxxxxxxxxxx"; 

$pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass); 

$stmt = $pdo->prepare("DELETE FROM SKU_Group_Dim WHERE Group_ID = ?"); 
$stmt->execute(array($Group_ID)); 

// send back the number of records it affected 
$status = $stmt->rowCount() > 0; 

// send back a JSON 
echo json_encode(array('status' => $status)); 

// nothing else can be outputted after this 
?> 

もちろん、これはテストされていないため、バグはほとんどありません。ブラウザのコンソールログを開くと、ログをたどって何が起きているのかを見ることができます。