當用戶點擊圖片時需要發帖子

Question

即時通訊在javascript中很新，所以這是個問題。每當用戶點擊網頁上的特定圖像時，我需要進行POST操作，每個圖像發送一個POST變量，如「image1 = 1」...

例如：在this頁面中，每次點擊號碼進行投票，它會發起一個後續操作，我需要相同的圖像和解碼代碼。 請幫我看看代碼。謝謝！

請注意，當您在圖像中使用按鈕時，IE出現問題，因此解決方案無法通過圖像按鈕實現。

Answer 1

如果我正確理解你的問題，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 2

既然你是JavaScript的新手，你可能會考慮使用jQuery來達到這個目的。如果是這樣，我建議閱讀jQuery.click和jQuery.post的API文檔。

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的，原型，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的： http://api.jquery.com/jQuery.post/

Answer 5

有使用AJAX這裏各種各樣的回答。

聽起來你可能想提交一個正常的頁面重新加載，但也許這種方法是好的。

通過將錨元素的onclick監聽器綁定到提交表單的函數，您可以使用表單的submit方法來提交它。

<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>