单击 HTML img 标签并使用 PDO 使用 jQuery/AJAX 更新 MySQL

Posted 2023-05-09

【中文标题】单击 HTML img 标签并使用 PDO 使用 jQuery/AJAX 更新 MySQL

【英文标题】：Click HTML img tag and update MySQL with jQuery/AJAX using PDO

【发布时间】：2017-04-25 02:53:34

【问题描述】：

我有这个 html：

<a href="#"  ><div class="menu"><img src="<?php echo $value->capa; ?>" class="img-rounded" id="item"  ></a></div>

我有那部分隐藏来自 img 的 ID：

<input type="hidden" id="idLivro" name="idLivro" value="<?=$value->id?>">

还有这个脚本：

$(document).ready(function()
    $(".menu").click(function()
        var idLivro = document.getElementById("idLivro");
        $.ajax(
            url: 'updateBadge.php?id='+idLivro,
            method: 'GET'
        )
    );
);

updateBadge.php：

require_once 'classes/Crud.php';

$banco = new Usuarios();

$idLivro = $_GET['idLivro'];

$banco->updateBadge($idLivro);

我想要做的是，当有人单击旁边有徽章的链接（img）时，它会在 DB 中的相应列中增加 1。

但是，我有更新方法的部分是在一个类中：

public function updateBadge($id)
        $sql  = "UPDATE $this->table SET badge = (badge+1) WHERE id = :id";
        $stmt = DB::prepare($sql);
        $stmt->bindParam(':id', $id);
        return $stmt->execute();
    

如何使用 AJAX 调用此函数来更新徽章计数器？

已编辑：我使用下面的 cmets 更改了代码。还是不行

【问题讨论】：

首先修复PHP。 2 个占位符和只有一个 bindParam 会导致您的问题

第二次修正接收2个参数的方法

第三次检查方法是用2个参数调用的

第四，确定您将在 HTML 中存储id 和badge 数据的位置，以便在运行 AJAX 调用时 javascript 可以看到并将其传递给 PHP

第五，更改 javascript 以从您决定将其存储在 HTML 中的任何位置获取 id 和 badge 数据

【参考方案1】：

您需要一个脚本（例如 Users.php，因为您在 AJAX 请求中调用它。在此 Users.php 中，您必须实例化您的类并使用相应参数调用 updateBadge 方法，这些参数也必须是在您的 AJAX 请求中发送。

如果您只是想增加徽章列，请编写以下查询（那么只有一个绑定参数就可以了）：

$sql = "UPDATE $this->table SET badge = (badge+1) WHERE id = :id";

要获取 AJAX 请求的 ID，您需要 HTML 中某处的 ID，通过 jQuery 获取它并将其传递给您的 URL，例如

$.ajax( 
     url: 'classes/Users.php?id='+theJsVariableYouStoredTheIdIn,
     method: 'GET'
 )

然后您可以通过$_GET['id']Users.php 访问它

【讨论】：

谢谢。我将使用编辑后的代码更新我的问题。

更新问题

AJAX请求后数据库中的值没有更新还是只是前端？如果 DB 中的值已更新而前端未更新，则必须添加 .done 函数，如 nimour pristou 的答案。

我看到那一刻，nimour pristou 在成功响应时更新用户 ID，而不是徽章图像。因此，在.done 中，您必须使用改进的版本替换/更新您的徽章图像（获取图像的src 属性，递增1 并将该值设置为src 属性，如果src 只是一个数）

【参考方案2】：

页面updateBadge.php

 <?php
    require_once 'classes/Crud.php';
    //function isAjax()  To test whether the query is in Ajax
    public function isAjax()
    
        return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']== 'XMLHttpRequest';
    
    if(isAjax())
        $banco = new Usuarios();
        $idLivro = $_GET['idLivro'];
        if($banco->updateBadge($idLivro))
            echo "updated";
        
    

还有你的脚本：

$(document).ready(function()
    $(".menu").click(function()
        var idLivro = document.getElementById("idLivro");
        var badge=  $('#vidLivro').val();
        $.ajax(
            url: 'updateBadge.php?id='+idLivro,
            method: 'GET'
        )
        .done(function(data,text,jqxhr)
            if(jqxhr.responssetext=='updated')
               $('#vidLivro').val(badge+1);  

            
        )
    );
);