0

我今天刚开始使用 JQuery.Ajax，想尝试使用相同的脚本对多个“a href”标签使用具有相同模板的名称：

如果我有一个“a href 标签”示例列表：

<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}”

我怎么做？

4

3 回答 3

2

在标记上使用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 编码。

于 2013-06-23T15:05:21.047 回答
1

首先，您的选择器不起作用，但您可以匹配 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);
        }
    });
});
于 2013-06-23T15:06:45.233 回答
0

除了 Derek & Darin 的出色答案之外，我还想再添加一种方法。只是为了让事情更简单，您可以将 存储id在元素的 id 中并使用 class 来引用所有标签：

<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，并节省更多代码，所以你去吧:)

于 2013-06-23T15:26:46.523 回答