如何创建像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的投票投票？

回答

相关问题