Question

I，m使用公共API thesportdb 我创建了函数，该函数是单击卡时，并重定向到新页面并显示数据，但是我有一个问题，问题是当我单击卡片时，无法在新页面中处理数据。

$.ajax({
    url : 'https://www.thesportsdb.com/api/v1/json/1/search_all_leagues.php?',
    type: 'get',
    dataType: 'json',
    data : {
        's' : 'Soccer'
    },

    success: function(result){
        let league = result.countrys;

        $.each(league, function(i, data){
            $('#club-list').append(`
                <div class="col-md-4 p-2">
                    <div class="card shadow" data-id="${data.idLeague}" onClick="console.log(`+data.idLeague+`);">
                      <img src="`+ data.strBadge +`" class="card-img-top p-2" alt="...">
                      <div class="card-body">
                        <p class="card-text">`+ data.strLeague +`</p>
                      </div>
                    </div>
                </div>`);
        });

        $('.card').on('click', function(){

            $.ajax({

                url : 'https://www.thesportsdb.com/api/v1/json/1/lookup_all_teams.php?',
                type: 'get',
                dataType: 'json',
                data: {
                    'id' : this.dataset.id
                },

                success: function(result){
                    let team = result.teams;

                        $('#club-detail').load('league.php', function(){
                                $.each(team, function(i, data){
                                    $('#club-detail').append(`
                                        <div class="col-md-4 p-2">
                                            <div class="card shadow">
                                              <img src="`+ data.strTeamBadge +`" class="card-img-top p-2" alt="...">
                                              <div class="card-body">
                                                <p class="card-text">`+ data.strTeam +`</p>
                                              </div>
                                            </div>
                                        </div>`);
                            });
                        });

                    console.log(team);
                }

            });

        });
    } 
});

index.php这是代码：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Football Match</title>
  </head>
  <body>

    <div class="container">
      <div class="row" id="club-list">



      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
  src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
  </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </body>
</html>

league.php这是代码：数据无法在此处显示，当我单击索引中的卡时，这是新页面。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Football Match</title>
  </head>
  <body>

    <div class="container">
      <div class="row" id="club-detail">



      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
  src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
  </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </body>
</html>

重定向到新页面时如何获取数据？

0 个答案: