javascript - 如何获取要单击的图像并将该数据通过表单发送到 JSON 和 mysql？

Question

我有一个投票应用程序，它可以工作，但单击一个单选按钮，然后提交表单。但是，我正在尝试为将注册点击并将变量发送到名为 update_vote() 的同一表单提交函数的图像创建一个侦听器。当我尝试通过 JSON 发送数据时，我无法解码变量。当我尝试添加侦听器时，变量未传递。那么如何像表单世界一样在点击后将图像 ID 发送到 php 和 mysql 呢？

我相信我的 json 尝试了太多东西，而且我一直在使用以前使用 json 的应用程序的修改版本。我已经删除了 json，现在尝试重新集成使用事件侦听器。花了几个小时后，我得到的最远的是投票，但它没有刷新页面，是我错过了什么还是通常是这样？

顶部显示提交的 POST 表单，底部显示 ajax 代码 index.php START

<?php require_once("../resources/config.php");

if(isset($_POST['imageId'])){
echo $_POST['imageId'];
//update_vote($_POST['radio']);
    update_vote("63");

if(isset($_POST['radio'])){
    echo $_POST['radio'];
    echo "123";
    ?>

    <script>alert("NEW VOTE");</script><?php
    update_vote($_POST['radio']);
}

}
if(isset($_POST['name'])) {
    echo $_POST['name'];
//update_vote($_POST['radio']);
    update_vote($_POST['name']);

}
?>

<form method='post' action='index.php' id='editor'>

    <div class="row">



        <?php images(); ?>

        <input type=submit id="submitVote" name="imageId" value="VOTE"/>
    </div>

</form>
</div>
    <!-- Footer -->
    <footer class="py-5 bg-dark">
      <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; Your Website 2018</p>
      </div>
      <!-- /.container -->
    </footer>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
<script src="js/vote.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  </body>

</html>
<script>
    $('a').click(function(){
        var src= $(this).find('img').attr('name');
        alert(src);
<!--        --> //update_vote( //'. );
        vote(src);


    });

</script>

结束索引.php

注意：直接在这里调用更新投票不起作用，因为它是一个 JAVASCRIPT 变量

这是functions.php和vote.js

函数.php

function update_vote($image_id)
{
    echo "update";
    //get number of votes and update
    global $link;
    $data = array();
    $stmt = query("INSERT INTO votes (userID, imageID) VALUES ('1', '{$image_id}')");
    //mysqli_stmt_bind_param($stmt, 'i', $image_id);
    confirm($stmt);

}
function update_vote2()
{
    update_vote("63");
    echo "update";


}

/*
 * Get the images to show from a specified folder and show two models
 */
function images(){


    //
    $query = query("Select * from photos ORDER BY RAND() LIMIT 2");
    confirm($query);
    $x = 0;
    while($row = fetch_array($query)){
        $x++;
        $vote = <<<DELIMITER


        <div class="col-lg-6 portfolio-item">

            <div class="card h-100 w-100" style="text-align:center">
            <a href="#" id="a"><img name={$row['id']} style="max-height:400px; class="card-img-top" src="admin/images/{$row['filename']}" alt=""></a>

        <div class="card-body text-center">
            <h4 class="card-title">
            Model {$x}
    </h4>
        <input class="text-center" type="radio" name="radio" value={$row['id']}>

            </div>

            </div>

            </div>






            DELIMITER;

        echo $vote;

    }


}

投票.js

//ajax call to send upvote
function vote(name){
    var httpRequest;
    httpRequest = new XMLHttpRequest();
    //console.log('')
    if (!httpRequest) {
        console.log('Cannot create an XMLHTTP instance');
        return false;
    }else{
        httpRequest.onreadystatechange = alertContents;
        httpRequest.open('POST', 'index.php', true);
        var data = "name="+encodeURIComponent(name);
        httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        //console.log(data);
        httpRequest.send(data);
    }
    function alertContents() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                console.log(httpRequest.responseText);
                var data = JSON.parse(httpRequest.responseText);

                if(data['imageID'] && data['new_amount']){
                    document.getElementById(data['imageID']).innerHTML = data['new_amount'];
                }
            } else {
                console.log('There was a problem with the request.');
            }
        }
    }
}

现在我在单击图片时可以进行投票，但是 1）提交表单时，它会顺利刷新页面，而 ajax 只是发送帖子而没有刷新操作，我可以添加吗？2）理想情况下，我想调用 php 函数 onclick 但这引起了很多头痛，我不能这样做，对吧？

因此该功能当前运行，但不会更改图像，这些图像应该在每次投票后随机显示。

标签： javascriptphpmysqljson