如何創建像jQuery/ajax函數stackoverflow的投票投票？

我可以使用Jquery調用一個動作，然後在成功時更改圖像，就像使用stackoverflow的投票投票功能一樣嗎？如何創建像jQuery/ajax函數stackoverflow的投票投票？

在我看來，我使用下面的代碼，但我不想刷新瀏覽器。任何人都可以提供一些代碼這個對我來說？

非常感謝。

<%if (!item.IsPrinted) 
{ %> 
    <%=Html.ImageLink("~/Content/images/web/delete.png", "printed", "MarkAsPrinted", "Order", item.TaskID, null, null)%> 
<%} 
else 
    {%> 
     <img src="~/Content/images/web/star.png" alt="printed" />      
    <% } %>

來源

2010-04-17 Daoming Yang

我假設你正在使用ASP。NET MVC，從你使用的「我可以使用Jquery來調用一個動作」，如果沒有請指定。謝謝 – 2010-04-17 22:32:40

是的。我使用的是asp.net mvc2。我試過你的代碼，不知道爲什麼onclick沒有被解僱。 – 2010-04-17 22:43:19

請確保在視圖中包含JavaScript文件 – 2010-04-17 23:02:25

一般而言，您應該通過ajax調用爲此目的調用幫助器方法，而不是通過ajax調用您的操作。然後，在輔助方法，更新得分的值（如存儲最新值到DATABSE等）和在AJAX的成功方法顯示相應的圖像

編輯：

public string UpdateVoteScore(int postId, int value) { 
    // store value to database 

    return "success"; 
}

在JavaScript：

var UpdateScore = function(postId, newValue) { 
    $.ajax({ 
      type: "POST", 
      url: /YourController/UpdateVoteScore, 
      data: { postId: postId, value: newValue }, 
      success: function(result) { 
       // replace your image 
       $("#MyImage" + postId).attr("src", "some new image path here"); 
      }, 
      error: function(req, status, error) { 
      } 
    }); 
}

在View：

<img id='<%= "MyImage" + post.Id %>' 
    src="some image path" 
    onclick="UpdateScore(scoreValueHere);"></img>

注：因爲你這樣做在一個循環post會發生變化，所以post.Id將是獨特的，因此使得圖像ID唯一

來源

2010-04-17 20:36:06

@Mahesh Velaga，你有關於這個的任何代碼示例嗎？ – 2010-04-17 21:48:26

@Daoming：用一些代碼片段編輯答案 – 2010-04-17 22:18:24

@Mahesh Velago，謝謝你的解決方案，但它只適用於第一次點擊和第一個圖像，我有一個通過數據庫foreach生成的圖像列表。我認爲這可能是img標籤ID的問題，他們都有一些圖像ID。有任何想法嗎？ – 2010-04-17 23:17:00

我不確定你完全理解ajax是什麼或者做什麼。

請求沒有Ajax通常由該方法本質上是這樣的：

[browser request]->[server handles request]->[new page sent to browser]

使用Ajax不同的是，一個請求被髮送到服務器，並響應由JavaScript的接收，而不頁面重新加載或任何東西。然後由JavaScript腳本來決定一旦收到請求後該怎麼做。

你要做的是將請求發送到'vote.asp'或其他東西，然後一旦收到來自服務器的響應，使用javascript更改圖像。

來源

2010-04-17 20:35:07 Cam

@incrediman，謝謝你的解釋。你有關於這個的任何示例代碼嗎？我對此沒有太多經驗。 – 2010-04-17 21:47:55

@Daoming Yang：這是一個完整的使用Ajax和jQuery的教程：http://api.jquery.com/jQuery.ajax/ – Cam 2010-04-17 22:25:40

是的，你可以使用jQuery這一點。例如，讓JQuery根據從服務器腳本返回的內容替換HTML代碼的一部分。

樣品：

<html> 
    <head> 
    <script type="text/javascript" src="jquery-1.3.1.js"></script> 
    <script type="text/javascript" src="jquery.form.js"></script> 
    <script> 
     $(document).ready(function(){ 
     $('#response a').bind('click',function(event){ 
      event.preventDefault(); 
      $.get(this.href,{},function(response){ 
      if (response.indexOf("OK") >= 0) { 
      $('#response').html("<img src="~/Content/images/web/star.png" alt="printed" /> "); 
      } 
      })  
     }) 
     }); 
    </script> 
    </head> 
    <body> 
    ... the other things on you're page 
    <div id="response"> 
     <%=Html.ImageLink("~/Content/images/web/delete.png", "printed", "MarkAsPrinted", "Order", item.TaskID, null, null)%> 
    </div> 
    ... more things on you're page... 
    </body> 
</html>

確保服務器腳本返回「OK」時，它需要更換什麼是在「輸入反應」分區。

來源

2010-04-17 20:47:59 Kdeveloper

@Kdeveloper，這個解決方案相當不錯，但會影響其他鏈接。有沒有什麼我可以做的動作和更換圖片而不刷新頁面。 – 2010-04-17 21:50:22

@ Daoming Yang：我更新了腳本，因此您不必在腳本中對HTML進行硬編碼。但不清楚你的其他鏈接是什麼意思。順便說一句，點擊鏈接不會導致頁面刷新（請參閱：「event.preventDefault（）;」）。 – Kdeveloper 2010-04-17 22:02:12

謝謝。「$（'a'）。bind（'click'，function（event）」會停止頁面上的所有鏈接，有什麼建議？ – 2010-04-17 22:25:47

你也許可以這樣做：

$('#vote_button').click(function() { 
    $.ajax({ 
     type: "GET", 
     url: "script_name.asp", //your script that talks to the database 
     data: "id=" + some_var, //get arguments 
     success: $("#image_to_be_changed").attr("src", "some new image path here"); 
});

來源

2010-04-17 22:47:08 vette982

我使用angularjs，PHP和MySQL的代碼下載創建類似stackoverflow.com一個simple voting application。你只需要將2個php文件改成ASP.NET文件。否則將保持完整。使用AngularJS創建投票應用程序更加簡單和靈活。

來源

2014-04-02 12:35:26 Swadesh

如何創建像jQuery/ajax函數stackoverflow的投票投票？

回答

相關問題