PHP，MySQL和JQuery-更新表而不刷新頁面

Question

在我的網站上，我有一個“添加到收藏夾” /“從收藏夾刪除”按鈕，用戶可以將其他用戶添加到他的收藏夾或從他的收藏夾中刪除其他用戶。

我有三列的表favorites ：

+-------+-----------+------------------+
|  id   |  id_user  | id_favorite_user |
+-------+-----------+------------------+
|   1   |     13    |       70         |
|   2   |      7    |       48         |
|   3   |     12    |       89         |
|   4   |     13    |       56         | 
|   5   |     13    |       33         | 
|  ...  |    ...    |      ...         |
+-------+-----------+------------------+

在此示例中，id為13的用戶在他的收藏夾中有三個用戶：70、56和33

以下是您單擊以從收藏夾添加/刪除鏈接的代碼，我在很多頁面上都看到它：

$my_user_id = $_SESSION['account']['id'];

//We test if the user $my_user_id has the user $id_user_here to his favorites or not. If he already has it we show a "Remove user from favorites" link, if not an "Add to favorites" link
$query = "SELECT `id` FROM `favorites` WHERE `id_user` = '$my_user_id' AND `id_favorite_user` = '$id_user_here' ";
$result = mysql_query($query) or die(mysql_error());
$row_result = mysql_fetch_assoc($result);
$totalrows_result = mysql_num_rows($result);
if ($totalrows_result == 0) { ?>
    <a href="addremovefavorites.php?type=addf&userid=<?= $id_user_here; ?>" title="Add to favorites"><img src="images/addtofavorites.gif"></a>                          
<? } else { ?>
    <a href="addremovefavorites.php?type=remf&userid=<?= $id_user_here; ?>" title="Remove from favorites"><img src="images/removefromfavorites.gif"></a>
<? } ?> 

這是我用來更新表格的php腳本-addremovefavorites.php：

<?php
//Here we connect to the database and check if the user is logged in...

$my_user_id = $_SESSION['account']['id'];

$type = testforsqlinjections($_GET['type']);
$userid = testforsqlinjections($_GET['userid']);

if ($type == "addf") {
    $query = "SELECT * FROM `favorites` WHERE id_user='$my_user_id' AND id_favorite_user='$userid' ";
    $result = mysql_query($query) or die(mysql_error());
    if (mysql_num_rows($result)<0) {
    $query = "INSERT INTO `favorites` (`id_user`, `id_favorite_user`) VALUES ('$my_user_id', '$userid')";
    $result = mysql_query($query) or die(mysql_error());
    header("location: myfavorites.php");
    }
}

if ($type == "delf") {
    $query = "DELETE FROM `favorites` WHERE `id_user` = '$my_user_id' AND `id_favorite_user` = '$userid' ";
    $result = mysql_query($query) or die(mysql_error());
    header("location: myfavorites.php");
}
?>

這就是我現在擁有它的方式，並且可以運行，但是我不喜歡它。 當用戶單擊鏈接以添加/刪除他的收藏夾中的另一個用戶時，他添加/刪除了他，但是隨后他被重定向到myfavorites.php，並且非常沮喪，因為他必須單擊瀏覽器的“返回”按鈕以回到他之前看過的頁面。

相反，我想在用戶不離開當前頁面的情況下完成所有這些操作。 我想更新表，然后顯示一條確認消息，表明用戶已添加到收藏夾或從收藏夾中刪除。

我需要從哪里開始的提示。 我在這里http://api.jquery.com/jQuery.ajax/上查看了jQuery文檔，這就是我的處理方式：

<a href="#" onclick="javascript:clickHandler(addf, <?= $id_user_here; ?>); return false;">Add to favorites</a>
<a href="#" onclick="javascript:clickHandler(remf, <?= $id_user_here; ?>); return false;">Remove from favorites</a>

鏈接和：

function clickHandler(type, userid){
$.ajax({
    type: "GET",
    url: "addremovefavorites.php",
    data: 'type='+ type + '&userid=' + userid,
    .done(function( msg ) {
    alert( "This user was " + msg);
    });
});
}

JQuery代碼。

如果您對我的腳本有任何幫助，我將不勝感激。

謝謝！

Answer 1

試試這個（未試用）。 更新。

function clickHandler(type, userid){
    $.ajax({
        type: "GET",
        url: "addremovefavorites.php",
        data: 'type='+ type + '&userid=' + userid,
        success: function(msg) {
            alert( "This user was " + msg);
        }
    });
}

請注意，警報中出現的所有內容（即var msg的內容）都是在addremovefavorites.php結尾處回顯的內容。

因此，如果addremovefavorites.php結尾為：

echo 'Bob is your uncle';

這就是成功函數中var msg的內容。

---

但是，最好總是擺脫內聯JavaScript。 代碼更清晰，更易於維護。

更改這些：

<a href="#" onclick="javascript:clickHandler(addf, <?= $id_user_here; ?>); return false;">Add to favorites</a>
<a href="#" onclick="javascript:clickHandler(remf, <?= $id_user_here; ?>); return false;">Remove from favorites</a>

至：

<a href="#" id="add2fav" class="addrem">Add to favorites</a>
<a href="#" id="rem4fav" class="addrem">Remove from favorites</a>

在jQuery中：

$(document).on('click','#addrem', function() {
    var type = ( $(this).attr('id') == add2fav) ? 'add' : 'rem';
    var userid = "<?php echo $id_user_here; ?>"; //I am familiar with this syntax
    $.ajax({
        type: "GET",
        url: "addremovefavorites.php",
        data: 'type='+ type + '&userid=' + userid,
        success: function(msg) {
            alert( "This user was " + msg);
        }
    });
});

Answer 2

在您的onclick屬性中，javascript正在調用帶有兩個參數的clickhandler。 當前，每個調用中的第一個參數是一個變量。 我想你是說它們是字符串？ 在addf和remf周圍添加撇號。

Answer 3

你可以用簡單的ajax來做到這一點：

<a href="javascript:void(0);" onclick="addremove('1')" id="1" data-user="1" data-type="add">add book</a>

其中“ 1”的用戶ID

和js：

function addremove(id){
        var user = $(id).attr('data-user'); 
            var type = $(id).attr('data-type'); 
        $.ajax({
                url: "addremove?type=" + type + "&user=" + user + "",
                beforeSend: function() {
                        $('#status').html('process...');
                },
                success: function(data){
                        $('#status').html(data);
                }
        });
}

Answer 4

@kamuken

我認為您已經在使用此代碼，並且可以正常工作。 它什么也沒做，然后我做到了：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function addremove(id){
    var user = $(id).attr('data-user');
    var type = $(id).attr('data-type');
    $.ajax({
            success: function(){
            alert('You want to ' + type + ' the user ' + user);
            }
    });
}
</script>
</head>
<body>

<a href="javascript:void(0);" onclick="addremove('54')" id="54" data-user="54" data-type="add">add book</a>

</body>

我得到：“您想取消定義用戶未定義”

Answer 5

我做的 ：）

這是我的鏈接的代碼：

if ($totalRows_recordarray == 0) { ?>
     <a href="javascript:void(0);" onclick="addremove('add_<?= $id_user_here; ?>')" id="add_<?= $id_user_here; ?>">add to favorites</a>         <? } else { ?>
     <a href="javascript:void(0);" onclick="addremove('rem_<?= $id_user_here; ?>')" id="rem_<?= $id_user_here; ?>">remove from favorites</a></a>
<? } ?>

這是JQuery代碼：

<script type="text/javascript">
function addremove(id){
    var str = id;
var res = str.split("_");
    $.ajax({
    type: "GET",
    url: "addremovefavorites.php",
    data: { type: res[0], userid: res[1] }
})
.done(function( msg ) {
    alert( msg );
});
}
</script>

現在，如果我不是在添加用戶后從“收藏夾”鏈接中刪除，而是在添加用戶后將“從收藏夾中刪除”鏈接，而不是“添加到收藏夾”，那就太好了。 有什么想法嗎？

謝謝大家的幫助。