Question

我的要求是在用户点击图片时将图片名称传递给store.php。

根据图像名称，我将查询数据库并显示结果

但我不知道如何在用户点击时传递图像名称。请指教。

代码如下：

<form action="store.php" method="post">
<div class="col-md-2 about-left">
                    <figure class="effect-bubba">
                        <img class="img-responsive" src="images/flip.jpg" id="flipkart" name="flipkart" alt=""/>
                        <figcaption>
                            <h2>FLIPKART</h2>
                        </figcaption>           
                    </figure>
                </div>
</form>

Answer 1

试试这段代码： -

function get_image_name(){
var src = $('img').attr('src').split('/');
var image_name = src[src.length - 1];
alert(image_name);
}

在图像onclick上调用此函数： -

<img class="img-responsive" src="images/flip.jpg" id="flipkart" 
name="flipkart" alt="" onclick="get_image_name()"/>

没有javascript尝试这种方法： -

<input type="hidden" name="image_name"  value="images/flip.jpg" />

将hidden input插入到与src图片

相同的表单设置值中

$_POST['image_name'] //get image name

Answer 2

使用javascript ajax将图像的名称发送到php，如下所示。你的html如下。

<img class="img-responsive" src="images/flip.jpg" id="flipkart" 
name="flipkart" alt="" onclick="send_image_name()"/>

Javascript应该如下。

function send_image_name(){
var src = $('img').attr('src').split('/');
var image_name = src[src.length - 1];
var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange=function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      alert("Successfully sent name!");
    }
  }
  xhttp.open("GET", "store.php?image_name=" + image_name, true);
  xhttp.send();
}

用户单击图像时传递图像名称或图像ID属性

2 个答案: