Question

这对我来说是一个全新的概念，所以我真的需要一些帮助。我正在尝试使用对Web服务的ajax调用来填充“WorkstationCount”类的所有标记。我已经确认了webservice，如下所述，正在运行并返回一个正确的整数。但是，HTML永远不会被更改。目前使用下面的代码我也没有收到任何控制台错误。我确定我做错了，但我试过了:)）

$('.WorkstationCount').html(function () {
    $.ajax({
        url: 'details.svc/getWorkstationCounts',
        type: 'GET',
        data: { 'packageid': $(this).attr('id') },
        dataType: 'json',
        success: function (count) {
            return count.d;
        },
        error: function (a, b, c) {
            $('.Toast').html('Error Retreiving Workstation Count!');
        }
    });
});

尝试澄清

 <span class="WorkstationCount" id="1"></span>
 <span class="WorkstationCount" id="2"></span>
 <span class="WorkstationCount" id="3"></span>

所以每个span应该有不同的结果...使用元素id进行ajax调用，然后它应该根据结果修改span的内容

Answer 1

啊，看完你的评论后，我看到了你的问题。您希望为数据中的每个元素发送id，并为每个WorkstationCount发出单独的ajax请求：

$('.WorkstationCount').each(function(i, val){
    $.ajax({
        url: 'details.svc/getWorkstationCounts',
        type: 'GET',
        data: { 'packageid': this.id },
        dataType: 'json',
        success: (function(el){
                return function (count) {
                    $(el).html(count.d);
                };
            })(this),
        error: function (a, b, c) {
            $('.Toast').html('Error Retreiving Workstation Count!');
        }
    });
});

PS this.id是一种更快的编写$(this).attr('id');的方式，因为它不依赖于jQuery对象和attr()

Answer 2

您必须在成功功能中更新.WorkstationCount的html：

$.ajax({
    url: 'details.svc/getWorkstationCounts',
    type: 'GET',
    data: { 'packageid': $(this).attr('id') },
    dataType: 'json',
    success: function (count) {
        $('.WorkstationCount').html(count.d);
    },
    error: function (a, b, c) {
        $('.Toast').html('Error Retreiving Workstation Count!');
    }
});

Answer 3

试试这个

$('.WorkstationCount').html(function () {
$this = $(this);
    $.ajax({
        url: 'details.svc/getWorkstationCounts',
        type: 'GET',
        data: { 'packageid': $(this).attr('id') },
        dataType: 'json',
        success: function (count) {
            $this.html(count.d);
        },
        error: function (a, b, c) {
            $('.Toast').html('Error Retreiving Workstation Count!');
        }
    });
});

使用ajax调用使用相同的类填充多个元素

3 个答案: