具有可单击区域的网页图像,可将数据发送到服务器脚本,并保留在同一页面上,无需刷新


Web page image with clickable areas that sends data to a server script and remains on the same page with no refresh

我想在网页中有一个可以具有可点击区域的图像(如html中的图像映射),但是当单击每个区域时,我不想转到不同的URL。

相反,我希望每当单击某个区域时,都会将一些数据值发送到服务器。每当单击某个区域时,我都希望保持在同一页面上,但将一些数据发送到服务器脚本,该脚本将收集数据并对其进行处理。

执行一些点击后,我想要一个提交按钮,该按钮最终将我们带到另一个网页以给出结果。我不知道使用哪种语言可以使所有这些成为可能。

我是网络编程语言的新手。

创建图像映射,但不输入 href 属性,而是进行绑定到每个多边形的 onclick 属性的 ajax 调用。

<area  alt="" title=""  onclick="alert('hello world')" shape="poly" coords="1100,132,956, .....
您可以使用

Javascript 和 .Click() 方法来实现这一点。你也可以使用 event.preventDefault() 方法阻止元素的默认操作发生。

例如:

阻止提交按钮提交表单阻止链接跟随 URL

我也是网络编程的新手。但我希望它会奏效。

<script>
   $(document).ready(function(){
       $('#clickableImg').click(
            $.post('page1.php',{ data1: 'value1'},function(data){
               // do something on successful post
            });
       );

   });
</script>
<img id="clickableImg" src="image.jpg">

和在您的 php 文件中

//page1.php
<?php
  if($_POST){
      $data= $_POST['data1']; 
       // do other things here

  }
 ?>