我如何得到一个要点击的图像,并通过表单将数据发送到json和mysql?

tquggr8v  于 2021-06-17  发布在  Mysql
关注(0)|答案(0)|浏览(153)

我有一个投票应用程序,这是工作,但点击单选按钮,然后提交了表格。但是,我正在尝试为图像创建一个侦听器,该侦听器将注册一个click并将变量发送到名为update\u vote()的表单提交函数。当我试图通过json发送数据时,我无法解码变量。当我尝试添加侦听器时,变量没有被传递。那么,在像表单世界一样被点击之后,如何将图像id发送到php和mysql呢?
我相信我的json尝试了太多的东西,而且我一直在使用以前使用json的应用程序的修改版本。此后,我删除了json,现在尝试使用事件侦听器重新集成。在花了几个小时之后,我得到的最远的结果是投票结果,但它并没有刷新页面,是我错过了什么还是通常是这样的?
顶部显示提交的post表单,底部显示ajax代码index.php开始

<?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
注意:在这里直接调用update投票不起作用,因为它是一个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,但这引起了很多头痛,我不能这样做,对吗?
因此,该函数当前运行,但不会更改图像,这些图像应该在每次投票后随机显示。

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题