Question

我今天刚开始使用JQuery.Ajax，并希望尝试使用相同的脚本为多个'a href'标签使用相同模板的名称：

如果我有'a href tags'的列表示例：

<a href='#modalbox' id="modalboxUpdateStaff$id1">Some Text</a>
<a href='#modalbox' id="modalboxUpdateStaff$id2">Some Text</a>
<a href='#modalbox' id="modalboxUpdateStaff$id3">Some Text</a>

我希望他们运行脚本：

    $('#modalboxUpdateStaff').click(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GenerateStaffPositionModalHtml",
            data: "{staffID: 1}",
            contentType: "application/json",
            dataType: "json",
            success: function (msg) {
                // Replace the div's content with the page method's return.
                $("#myCustomModalBody").text(msg.d);
            }
        });
    });

我传入

的地方

$ id
的值

进入我的剧本

数据：“{staffID：id}”

我该怎么做？

Answer 1

在标记上使用class和data-*属性会更有意义：

<a href="#modalbox" class="modalboxUpdateStaff" data-id="$id1">Some Text</a>
<a href="#modalbox" class="modalboxUpdateStaff" data-id="$id2">Some Text</a>
<a href="#modalbox" class="modalboxUpdateStaff" data-id="$id3">Some Text</a>

或者如果您只想发送值1,2,3，...：

<a href="#modalbox" class="modalboxUpdateStaff" data-id="1">Some Text</a>
<a href="#modalbox" class="modalboxUpdateStaff" data-id="2">Some Text</a>
<a href="#modalbox" class="modalboxUpdateStaff" data-id="3">Some Text</a>

然后使用类选择器和.data()方法来读取id的值：

$('.modalboxUpdateStaff').click(function () {
    var id = $(this).data('id');
    $.ajax({
        type: "POST",
        url: "Default.aspx/GenerateStaffPositionModalHtml",
        data: JSON.stringify({ staffID: id }),
        contentType: "application/json",
        dataType: "json",
        success: function (msg) {
            // Replace the div's content with the page method's return.
            $("#myCustomModalBody").text(msg.d);
        }
    });
});

另请注意，我已使用JSON.stringify来确保发送到服务器的data参数的正确JSON编码。

Answer 2

首先，您的选择器不起作用，但您可以匹配href。然后传递id。如下：

$('a[href="#modalbox"]').click(function () {
    var id = this.id.replace('modalboxUpdateStaff$id', '');
    $.ajax({
        type: "POST",
        url: "Default.aspx/GenerateStaffPositionModalHtml",
        data: {staffID: id},
        contentType: "application/json",
        dataType: "json",
        success: function (msg) {
            // Replace the div's content with the page method's return.
            $("#myCustomModalBody").text(msg.d);
        }
    });
});

Answer 3

除了Derek＆amp;达林的出色答案，我想补充一点。只是为了简化操作，您可以将id存储在元素的id中，并使用类来引用所有标记：

<a href="#modalbox" class="modalboxUpdateStaff" id="1">Some Text</a>
<a href="#modalbox" class="modalboxUpdateStaff" id="2">Some Text</a>
<a href="#modalbox" class="modalboxUpdateStaff" id="3">Some Text</a>

因此，在您的ajax电话中，您可以使用

$('.modalboxUpdateStaff').click(function () {
    //var id = $(this).data('id');
    var id= this.id;
    $.ajax({
        type: "POST",
        url: "Default.aspx/GenerateStaffPositionModalHtml",
        data: JSON.stringify({ staffID: id }),
        contentType: "application/json",
        dataType: "json",
        success: function (msg) {
            // Replace the div's content with the page method's return.
            $("#myCustomModalBody").text(msg.d);
        }
    });
});

我觉得这会比使用data更快，并保存更多代码，所以在这里你去了：）

使用多个ID在Aspx页面中触发JQuery.Ajax事件

3 个答案: