javascript - 如何设置按钮以使用 jQuery、AJAX、JSON 和 MVC 调用不同的按钮？

Question

我想要一个类似下面的屏幕:

   <div id="statusText></div> 

   <button type="button" id="transferData1"
       data-href="/Tools/Data/TransferData1">Transfer Data 1</button>
   <button type="button" id="transferData2"
       data-href="/Tools/Data/TransferData2">Transfer Data 2</button>
   <button type="button" id="transferData3"
       data-href="/Tools/Data/TransferData3">Transfer Data 3</button>

单击每个按钮时都会调用 MVC 操作方法，然后让它返回一些状态。当我有多个按钮时，是否有一种简单的方法可以使用 jQuery、Ajax 和 JSON 进行设置？

到目前为止我有以下脚本:

<script type="text/javascript">
    $(document).ready(function () {
        $('#transferData')
            .click(function () {
                xxx
            });

    });
</script>

但是我怎样才能让这个脚本适用于不同的按钮 ID，并使用 Ajax 调用不同的操作方法？

Answer 1

有几个选项

1) 使用表单，为每个按钮指定一个值，并通过查看为该按钮回传的值来区分哪个按钮被推送到服务器端。有一个很好的方法可以通过使用 ActionFilters 来清理/拆分为多个服务器端操作 (http://www.dotnetcurry.com/ShowArticle.aspx?ID=724)。如果需要 ajax 那么你可以使用 mvc3 中的不显眼的 ajax 扩展。

2)使用jquery重写按钮的click方法，手动调用action然后使用结果

$('[data-href]').click(function() { 
  $.ajax({ url: $(this).attr('data-href') })
    .success(function(data) {});
});