Question

我有以下工作代码：

<script>
$(document).ready(function(){
$('#target').click(function() {
$("#success").load("/contacts/person/view/1", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
});
});
</script>

我希望有一系列链接，例如：

<a id="target">a</a>
<a id="target">b</a>
<a id="target">c</a>

每次点击时都会显示特定的人。因此，每个链接都将引用一个特定的人。因此，根据哪个链接点击了以下值：

/联系人/人/视图/ 1

必须改变。

我该怎么办呢？

感谢您的帮助。

Answer 1

考虑将AJAX请求的链接放在A标记的href属性<a href="/contacts/person/view/1" class="target">a</a>中。然后你可以使用下面的Rob W代码稍作修改：

<a href="/contacts/person/view/1" class="target">a</a>
<a href="/contacts/person/view/2" class="target">b</a>
<a href="/contacts/person/view/3" class="target">c</a>
<script>
$(document).ready(function(){
    $('.target').click(function(e) {
        e.preventDefault();
        $("#success").load(this.href, function(response, status, xhr) {
            if (status == "error") {
                var msg = "Sorry but there was an error: ";
                $("#error").html(msg + xhr.status + " " + xhr.statusText);
            }
        });
    });
});
</script>

请注意，差异是加载中的网址参数设置为this.href，this此处指的是点击的a标记。

Answer 2

您可以将data-id分配给<a id="target" data-id="1">a</a>，然后将data-id值分配给函数中的var，如下所示：var personNumber = $(this).attr("data-id");

您的Javascript将如下所示：

<script>
$(document).ready(function() {
    $('#target').live('click', function() {
        var personNumber = $(this).attr("data-id");
        $("#success").load("/contacts/person/view/"+personNumber, function(response, status, xhr) {
            if (status == "error") {
                var msg = "Sorry but there was an error: ";
                $("#error").html(msg + xhr.status + " " + xhr.statusText);
            }
        });
    });
});
</script>

你的HTML看起来像这样：

<a href="javascript:void(0);" id="target" data-id="1">a</a>
<a href="javascript:void(0);" id="target" data-id="2">b</a>
<a href="javascript:void(0);" id="target" data-id="3">c</a>

jquery加载特定的页面/查询字符串

2 个答案: