HTML 输入按钮 JS onClick答案

【问题标题】：HTML Input Button JS onClickHTML 输入按钮 JS onClick
【发布时间】：2018-06-13 09:17:38
【问题描述】：

我试图仅在按下按钮时执行脚本，我的问题是每次刷新或进入页面时都会执行脚本...

我的 JS 函数：

<script>
    document.getElementById("addcarrinho").onclick = function ()
    {
        alert("<?PHP add_prod_carrinho(get_produto(@$_GET['id'])[0][id_produto]); ?>");
    };
</script>

每次我进入页面时都会执行此函数，有人可以解释一下为什么吗？

这是我的第一个函数：

<script>
    function add_carrinho()
    {
        alert("<?PHP add_prod_carrinho(get_produto(@$_GET['id'])[0][id_produto]); ?>");
    };
</script>

也不行。

这是脚本执行的函数：

function add_prod_carrinho($prod_id)
{
    global $connection;

    $query = "INSERT INTO carrinho (id_cliente, id_produto) VALUES ('".$_SESSION['user_id']."', '".$prod_id."');";

    if(!$connection->query($query))
    {
        echo 'Houve um erro ao adicionar o produto ao carrinho.';
    }
}

这是这段代码的完整页面：

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-yw4l{vertical-align:top}
.tg .tg-yw42{text-align:left; vertical-align:top;}
</style>

<script>
    document.getElementById("addcarrinho").onclick = function ()
    {
        alert("<?PHP add_prod_carrinho(get_produto(@$_GET['id'])[0][id_produto]); ?>");
    };
</script>
                    <!-- Begin Post -->
                    <div class="content_product">
                        <h2>Produtos - <?php echo get_produto(@$_GET['id'])[0][nome]; ?><span class="title-bottom">&nbsp;</span></h2>
                        <?php
                                echo '<table class="tg">
                                      <tr>
                                        <th class="tg-yw4l"><img src="css/images/product-img1.jpg" alt="Imagem de '.get_produto(@$_GET['id'])[0][nome].'" /></th>
                                        <th class="tg-yw42">
                                            '.get_produto(@$_GET['id'])[0][nome].'
                                            </br>
                                            '.get_produto(@$_GET['id'])[0][descricao_breve].'
                                            </br>
                                            </br>
                                            <span>Preço s/iva: </span>'.get_produto(@$_GET['id'])[0][preco_sem_iva].'<span>€</span>
                                            </br>
                                            <span>Preço c/iva: </span>'.get_produto(@$_GET['id'])[0][preco_com_iva].'<span>€</span>
                                            </br>
                                            </br>
                                            '.get_produto(@$_GET['id'])[0][id_produto].'
                                            <input id="addcarrinho" type="button" value="Adicionar ao carrinho" onclick="add_carrinho()"/>
                                        </th>
                                      </tr>
                                    </table>
                                            </br>
                                            '.get_produto(@$_GET['id'])[0][descricao].'';
                        ?>
                    </div>
                    <!-- End Post -->

我正在使用容器，所以这个页面上没有 body 或 head 标签...

有人可以帮我吗？

谢谢

编辑：感谢@vogomatix 帮助我。解决方案：

<script>
  $(".addcarrinho").click( function() {
    $.ajax({
       url: "http://your_server/add_prod.php",
       data: { id: your_id }
    })
  })
</script>

【问题讨论】：

PHP 在构建页面时在服务器上运行，javaScript 在客户端上运行，这就是为什么每次在服务器上生成页面时都运行 PHP 的原因。 add_prod_carrinho 是一个 PHP 函数。
只有在执行 javascript 函数时才能运行该函数？这是我在项目中对该函数的唯一引用，它应该只在脚本运行时才运行......
您要查找的搜索词是“AJAX”。
您的 onClick 方法应该向服务器生成一个请求，然后服务器调用您的 PHP 函数。
@NiettheDarkAbsol 谢谢，我将尝试使用 AJAX。

标签： javascript html button input

【解决方案1】：

你需要

处理来自页面的请求的脚本，包含方法add_prod_carrihno 并接收该方法的参数。让我们称之为add_prod.php。
生成页面的脚本，例如index.php

在 index.php 中，您有 onClick 方法，该方法会生成调用 http://your_server/add_prod.php?id=1234 的请求，其中 1234 是您要插入的 id。

\\ load jQuery here....

<script>
  $(".addcarrinho").click( function() {
    $.ajax({
       url: "http://your_server/add_prod.php",
       data: { id: your_id }
    })
  })
</script>

【讨论】：