Javascript 找到两个图像中被单击的图像，并将其报告给数据库

我对编程并不陌生，也不是一个天才或大师。现在我正在尝试创建一个类似where的网站

两个图像从各自的阵列中随机显示，

向用户单击的图像投赞成票

结果作为投票存储在数据库中

现在我已经完成了第一部分，第三部分也将在php中完成。
我面临的问题是第二部分。
我的JavaScript代码如下..

var imagesArray1 = ["a.jpg","b.jpg","c.jpg","d.jpg","e.jpg"];

var imagesArray2 = ["f.jpg","g.jpg","h.jpg","i.jpg","j.jpg"];



function displayImage(){


document.getElementById('nextButton').value="NEXT";
 var num1 = Math.floor(Math.random() * (imagesArra1.length));
var num2 = Math.floor(Math.random() * (imagesArray2.length));

document.canvas1.src = imagesArray1[num1];
document.canvas2.src = imagesArray2[num2];     }

如你所见。。我创建了两个数组，并从这两个数组生成了一个随机图像。现在要创建一个轮询系统，一个解决方案是取两个变量p和q

p=num1

和

q=num2

如果单击image1，php代码将向DB报告“p”和索引

num1

的值
如果单击image2，php代码将发送“q”和索引值

num2

---

num1

和

num2

是图像阵列的随机生成索引。我将处理php部分，只是希望得到这方面的帮助。
任何其他代码解决方案都将不胜感激。非常感谢您的时间和帮助

我试着写了以下内容：

这就是我建议你应该显示你的图像

<img src="pathToImage1Array" data-name="p" id="num1_Image1IndexFROMTheArrayVariable">

<img src="pathToImage2Array" data-name="q" id="num2_Image2IndexFROMTheArrayVariable">

---

我试着写下来：

这就是我建议你应该显示你的图像

<img src="pathToImage1Array" data-name="p" id="num1_Image1IndexFROMTheArrayVariable">

<img src="pathToImage2Array" data-name="q" id="num2_Image2IndexFROMTheArrayVariable">

---

---

这些图像索引/ID是否也存储在db中？不，图像索引未预存储在db中。但是，在单击任何图像（Image1或Image2）时，我想将所选图像的索引存储在数据库中，数据库中是否有任何图像信息存储？没有。数据库中没有预先存储的图像信息。这些图像是从服务器中获取的，您在数据库中存储的到底是什么？您是否正在保存该图像的升级投票？这些图像索引/ID是否也存储在db中？不，图像索引未预存储在db中。但是，在单击任何图像（Image1或Image2）时，我想将所选图像的索引存储在数据库中，数据库中是否有任何图像信息存储？没有。数据库中没有预先存储的图像信息。这些图像是从服务器中获取的，您在数据库中存储的到底是什么？您不是在保存该图像的升级吗？您所说的…img src=“pathToImage1Array”是什么意思？？Image1Array的路径是什么？也。。两个阵列中都有大约50个图像。。我应该kep img元素的哪个id？$.ajax（{type:“POST”，数据：{action:action，image:image}，url:“C:\Users\user\Desktop\New folder\phpfile.php”，数据类型：“json”，编码：true，成功：函数（响应）{if（response==“ok”）{alert（“投票表决”）；}else{alert（response）；}}；我想这部分$.ajax在我的脚本中不起作用tag@ManavSethi不，不是完整的c://路径，只是有Ajax的页面中的文件路径。您能告诉我如何显示图像吗？以及如何填充EMG…img src=“pathToImage1Array”是什么意思？？Image1Array的路径是什么？另外..两个数组中大约有50个图像..我应该kep img元素的id是什么？$.ajax（{type:“POST”，数据：{action:action，image:image}，url:“C:\Users\user\Desktop\New folder\phpfile.php”，数据类型：“json”，encode:true，success:function（response）{if（response==“ok”）{alert（“投票表决”）；}else{alert（response）；}}；我想这部分$.ajax在我的脚本中不起作用tag@ManavSethi不，不是完整的c://路径，只是有Ajax的页面中的文件路径。你能告诉我如何显示你的图像吗？以及如何填充它们

<?php

$conn = new mysli("..."); // the staff you should know already

function image1($conn)
{

    if ($_SERVER['REQUEST_METHOD'] == "POST"):
        $imageIndex = $_POST['imageIndex'];
        $image      = $_POST['image'];
        $sql = $conn->prepare("INSERT into YourTable (`p/q`,index) VALUES(?,?)");
        $sql->bind_param("si", $image, $imageIndex);
        if ($sql->execute()) {

            echo json_decode("ok");
        } else {

            echo json_decode("Error : " . $conn->error);
        }
    endif;
}


function image2($conn)
{

    if ($_SERVER['REQUEST_METHOD'] == "POST"):
        $imageIndex = $_POST['imageIndex'];
        $image      = $_POST['image'];
        $sql = $conn->prepare("INSERT into YourTable (`p/q`,index) VALUES(?,?)");
        $sql->bind_param("si", $image, $imageIndex);
        if ($sql->execute()) {
            echo json_decode("ok");
        } else {
            echo json_decode("Error : " . $conn->error);
        }
    endif;
}

if (isset($_POST['action'])) {

    $action = $_POST['action'];

    switch ($action) {
        case 'firstimage':
            image1($conn);
            break;

        case 'secondimage':
            image2($conn);
            break;
    }
}

?>