jquery ajax成功回调难度

时间:2011-10-24 12:19:14

标签: javascript asp.net-mvc jquery

我有以下代码:

@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>
<div data-role="page">
    <div data-role="header">
        ...</div>
    <div data-role="content">
        <a id="btnShowCustomers" data-role="button" href="#secondDiv"></a>
    </div>
    <div data-role="footer">
        ...</div>
</div>
<div id="secondDiv" data-role="page">
    <div id="list" data-role="content">
    </div>
</div>
<div id="customerDetailsDiv" data-role="page">
    <div data-role="content">
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function (event) {
        $('#btnShowCustomers').bind('vclick', function (event) {
            GetCustomers();
        });
    });

    function GetCustomers() {
        var webMethod = "Home/GetCustomers";
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: webMethod,
            data: "{}",
            dataType: "json",
            success: function (dataObj) {
                $(dataObj).each(function () {
                    if ($(this).CanConsume) {
                        alert('can consume');
                        $('<a href="#" data-date="' + $(this).DateActivated + '" data-id="' + $(this).ID + '">' + $(this).Name + '</a>').appendTo('#list');
                    }
                })
            }
        });
    }
</script>

从服务器端我返回一个Customer对象列表。客户具有以下属性;

  • ID
  • CanConsume(bool)
  • 名称
  • DateActivated

我想迭代返回的结果集并构建锚元素并将它们附加到div命名列表中。你知道为什么这不起作用吗?我没有得到任何javascript错误。

2 个答案:

答案 0 :(得分:1)

dataObj是普通JavaScript(JSON)对象的常规列表。不要使用jQuery迭代它,因为jQuery.each(...)遍历DOM元素。

试试

   ...
   success: function(dataObj){
      for(var i=0; i < dataObj.length; i++){
         var obj = dataObj[i];
          if (obj.CanConsume) {
              alert('can consume');
              ...
          }
      }
   }

这应该有效。

否则请尝试Firebug或Chrome开发者工具检查响应或在成功回调中设置断点。这应该可以为您提供足够的信息来解决问题。

答案 1 :(得分:1)

不幸的是, jQuery会导致错误。

如果这不起作用,请发布一些JSON。

该死的快速,再次:

$.each(dataObj, function (index, element) {
    if (element.CanConsume) {
           alert('can consume');
           $('<a href="#" data-date="' + element.DateActivated + '" data-id="' + element.ID + '">' + element.Name + '</a>').appendTo('#list');
       }
});