-2

MySQL データベースから取得したアイテムのリストがあります。MySQL から簡単な削除クエリを実行するリンクをクリックすることで、ユーザーがアイテムを削除すると同時に、ページを更新せずにリストからアイテムを動的に削除する機能を作成しようとしています。

JSなどに関しては初心者です。

私のマークアップ:

<!-- the following content comes from MySQL -->
<div class="item">
    <!-- div content -->
    <a href="javascript:void(0)" onclick="someFunction()">Delete</a>
<div>

<div class="item">
    <!-- div content -->
    <a href="javascript:void(0)" onclick="someFunction()">Delete</a>
</div>

何を入力する必要があるのか​​ わかりませんがsomefunction()、対応する DIV のコンテンツのみをデータベースから削除し、ページを更新せずにユーザーから削除または非表示にする必要があります。

4

2 に答える 2

1

AJAX に精通していますか? これをすでに知っている場合はご容赦ください。

Ajax はデータを外部の php ファイルにポストし、受け取ったデータを処理して応答を返します。次のようになります。

ファイル #1:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#Sel').change(function() {
                    var opt = $(this).val();
                    var someelse = 'Hello';
                    var more_stuff = 'Goodbye';
                    $.ajax({
                        type: "POST",
                        url: "receiving_file.php",
                        data: 'selected_opt=' + opt + '&something_else=' +someelse+'&more_stuff='+more_stuff,
                        success:function(data){
                            alert('This was sent back: ' + data);
                            //Next line adds the data from PHP into the DOM
                            $('#somediv').html(data);
                        }
                    });
                });
            });
        </script>
    </head>
<body>

<div id="somediv">
    <select id = "Sel">
        <option value ="Song1">default value</option>
        <option value ="Song2">Break on through</option>
        <option value ="Song3">Time</option>
        <option value ="Song4">Money</option>
        <option value="Song5">Saucerful of Secrets</option>
    </select>
</div><!-- #somediv -->

ファイル #2: receive_file.php

<?php
    //This is where you get the data from the browser
    $recd = $_POST['selected_opt'];
    $uid = $_POST['someelse'];

    //This is where you do your MYSQL database changes, for example:
    //mysql_query("UPDATE `users` SET `fav_song`='$recd' WHERE `user_id` = '$uid'");

    //When done, you can echo back some new HTML, like this:

    $r  = '<h1>You chose:</h1>';
    $r .= '<p>' . $recd . '</p>';  //adds to $r

    echo $r;  //Use ECHO to send data back to the browser

上記は、完全に機能する、スタンドアロンの、コピーして貼り付けることができる例です。コピーして 2 つのファイルに貼り付けるだけです。

  1. index.html (または test.php など)、および
  2. receive_file.php -- このファイルの名前を変更する場合は、ファイル 1 の AJAX コード ブロックの名前も変更する必要があります。
于 2013-09-17T22:45:28.587 に答える