Question

我正在使用jquery从api中提取足球数据，如下所示

type: 'GET',
dataType: 'json',
url: "http://api.football-data.org/v1/competitions/426/teams",
processData: true,
//idLength: url.Length - url.LastIndexOf("/", StringComparison.Ordinal) - 1,
//id: url.Substring(url.LastIndexOf("/", StringComparison.Ordinal) + 1, idLength),
success: function (data, status) {
    var trHTML = '';
    $.each(data.teams, function (key, item) {
        var id = item._links.self.href;
        var indexOfLastBackSlash = id.lastIndexOf("/") + 1;
        id = id.substring(indexOfLastBackSlash);
        //$('<option>', { text: item.TeamName, id: item.ID }).appendTo('#lstTeams');
        trHTML += '<tr class="info"><td>' + item.name +
                  '</td><td>' + item.code +
                  '</td><td>' + item.shortName +
                  '</td><td>' + item.squadMarketValue +
                  '</td><td>' + item.crestURL +
                  '</td><td>' + id +
                  '</td></tr>';

我希望能够选择一个＆＃39;＆＃39;并导航到另一个网址，例如＆＃34; http://api.football-data.org/v1/teams/322/fixtures＆＃34;对于id为322的团队。我该怎么办？

Answer 1

您可以创建一个function，它将执行相同的ajax request，但这次是单个记录。在你的目标click event上，你需要调用该函数来传递你需要获取记录的id。一种方法是将data attribute设置为目标容器。

以下是执行类似功能的示例代码。

$(function() {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts/',
        method: 'GET',
        dataType: 'json'
    }).then(function(Data) {
        $.each(Data, function (key, data) {
        var id = data.id;
        var title = data.title;
        $('.tableAllRecords').append('<tr><td><a href=# class=mylink data-id='+id+'>'+id+'</a></td><td>'+title+'</td></tr>');
      });
    });
});

function fetchSingle(id) {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts/' + id,
        method: 'GET',
        dataType: 'json'
    }).then(function(data) {
        var id = data.id;
        var title = data.title;
        var body = data.body;
        $('.tableSingleRecord').append('<tr><td>'+id+'</td><td>'+title+'</td><td>'+body+'</td></tr>');
    }); 
}

$(document).on('click', '.mylink', function(e) {
    var id = $(this).data('id');
    fetchSingle(id);
    e.preventDefault(); // disabling anchor's default [redirect] behaviour
});

这是小提琴的链接。 https://jsfiddle.net/2h54vu7h/

如果您需要在新页面上显示记录，则只需将id传递到url，然后在下一页上发出ajax请求即可获取id变量url。

示例：'<a href=somepage.html?id='+id+'>View Details</a>';

如何选择＆＃39;＆＃39;＆＃39;并使用jquery导航到url？

1 个答案: