Question

我是非常新的javascript所以，这是问题。每当用户点击网页上的特定图像时，我都需要进行POST操作，每个图像都发送一个类似“image1 = 1”的POST变量...

示例：在this页面中，每次点击要投票的号码，它都会进行后期操作，我需要相同但有图像和代码说明。请帮我解释一下代码。谢谢！

请注意，当您使用带图像的按钮时IE会出现问题，因此无法使用图像按钮实现解决方案。

Answer 1

由于您不熟悉JavaScript，因此可以考虑将jQuery用于此目的。如果是这样，我建议您阅读jQuery.click和jQuery.post的API文档。

Answer 2

如果我正确理解您的问题，则 javascript不需要来实现您想要的效果。

我建议使用常规按钮并将其设计为图像。

这样的事情应该有效：

input.imgbutton {
  background-image: url(...);
  background-color: inherit;
  border: none; padding: none; margin: none;
  height:32px; width:32px;  
  text-indent:-9999px;
}

在这里演示：http://jsbin.com/iwame3/edit

Answer 3

使用名为AJAX的强大JavaScript功能解决了这些问题。 JavaScript Framework Prototype：

的示例

<img src="/path/to/image" id="image-1" />
<img src="/path/to/image" id="image-2" />
<img src="/path/to/image" id="image-3" />
<!-- ... etc. -->

<script type="text/javascript">
    var url = '/relative/path/to/send/post/request';

    // Get all images and start observing the click event
    // to start a AJAX request
    $$('img').invoke('observe', function(image) {

        // Extract number from image id
        var id = image.id.match(/\d+$/)[0];

        // Send the request with the post paremeter image=id
        new Ajax.Request(url, {
            method: 'post',
            parameters: {image: id},
            onSuccess: function(response) {
                alert('Jippii, successfully sending post request');
                // ...
            }
        });

    });
</script>

Ajax.Request的更多信息：http://api.prototypejs.org/ajax/ajax/request/

请记住，使用JavaScript框架（jQuery，Prototype，mootools等）构建此类功能非常简单快捷。

Answer 4

HTML：

  <form id="radio_form">
   <fieldset>
      <label><input class="myRadio" type="radio" name="color" value="1" checked="checked" />1</label><br />
      <label><input class="myRadio" type="radio" name="color" value="2" />2</label><br />    
      <label><input class="myRadio" type="radio" name="color" value="3" />3</label><br />
      <label><input class="myRadio" type="radio" name="color" value="4" />4</label><br />
      <label><input class="myRadio" type="radio" name="color" value="5" />5</label><br />
      </fieldset>
    </form>

   <br />
   <br />

    <img class="CanVote" src="myImage78007.png" alt="myImage78007">

JavaScript（jQuery）：

   var gFileToPostTo='VoteImage.aspx'; //Location of the file you want to send the POST Request to


   function VoteImage(pVote,pImage) {
       $.post(gFileToPostTo, { vote: pVote, image: pImage} ); //We send POST request to the file, which is set above


   }

    $(document).ready(function(){
          $('img .CanVote').click(function() { //if the client, click on one of the image so have class "CanVote"....
              VoteImage(1,$(this).src); // Will it send a POST request to the file that is set above, with a vote 1 

          });

           $('.myRadio').click(function() { //If the client , click on one of the radio buttons ..

              var vote = $(this).val();
              $('img .CanVote').each(function(i) {
                 VoteImage(vote,$(this).src); //Will the vote be sent as POST to the file that has been set above. With the vote they chose to all the images. This is repeated for all images on the page that has CanVote class

              });
           }
    }

有关jQuery中POST的更多信息： http://api.jquery.com/jQuery.post/

Answer 5

这里有各种使用AJAX的答案。

听起来你可能想要提交页面重新加载的普通表单，所以也许这种方法会很好。

您可以使用表单的submit方法提交它，方法是将锚元素的onclick侦听器绑定到提交表单的函数。

<a href='#' onclick='cow_submit("zoodle")'><img src='send.gif'></a>
<form method='post' id='formie' action='find_some_action.php'>
  <input type='hidden' id='snoutvar' name='snoutvar' value='snout'>
</form>

<script>
function form_submit(a_var_to_set){
  var form_element=document.getElementById('formie'); //get the element as a JS object
  var snout=document.getElementById('snoutvar'); //get the hidden input element
  snout.value=a_var_to_set; //set the value to whatever you want
  form_element.submit(); //sends the form. the page will reload
  }
</script>

用户点击图片时需要发布POST

5 个答案: