Fatal编程技术网
  • jquery/
  • Jquery 重定向到新页面时如何获取数据？

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

jquery ajax api

Jquery 重定向到新页面时如何获取数据？,jquery,ajax,api,Jquery,Ajax,Api,一、 我正在使用公共API端口数据库 我创建了一个函数，这个函数是当卡片点击时，重定向到新页面并显示数据， 但我有一个问题，问题是当我点击卡片时，数据无法在新页面中处理 $.ajax({ url : 'https://www.thesportsdb.com/api/v1/json/1/search_all_leagues.php?', type: 'get', dataType: 'json', data : { 's' : 'Soccer'

一、 我正在使用公共API端口数据库 我创建了一个函数，这个函数是当卡片点击时，重定向到新页面并显示数据， 但我有一个问题，问题是当我点击卡片时，数据无法在新页面中处理

$.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);
                }

            });

        });
    } 
});

$.ajax({
网址：'https://www.thesportsdb.com/api/v1/json/1/search_all_leagues.php?',
键入：“get”，
数据类型：“json”，
数据：{
“s”：“足球”
},
成功：功能（结果）{
让联盟=结果。国家；
$。每个（联盟，功能（i，数据）{
$（“#俱乐部列表”）。追加(`

`+data.strLeague+`

`);
});
$（'.card'）。在（'click'，function（）上{
$.ajax({
网址：'https://www.thesportsdb.com/api/v1/json/1/lookup_all_teams.php?',
键入：“get”，
数据类型：“json”，
数据：{
“id”：this.dataset.id
},
成功：功能（结果）{
让团队=结果团队；
$（'#club detail'）.load（'league.php'，function（）{
$。每个（团队、职能（i、数据）{
$（“#俱乐部详细信息”）。附加(`

`+data.stream+`

`);
});
});
控制台日志（团队）；
}
});
});
} 
});
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>


足球比赛
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>


足球比赛
为什么会有重定向？jQuery和ajax通常用于避免此类问题。但无论如何，请使用本地存储。问题是如何知道哪些数据是正确的，这是您必须解决的问题。我想显示卡点击功能的数据，我在console.log（团队）中获取数据；但我不知道如何在收到数据时将数据发送到本地存储中的新页面存储数据，如果本地存储中有数据，则重定向到第二页并呈现数据。否则，重新设计approach.Ajax应该是您提到的场景中的解决方案，而不是问题所在。它在用户未注意到重新加载的情况下更新页面。您可以在下一页页面加载事件中编写ajax（重定向后）来提取数据。