个人中心
gpt4 book ai didi

javascript - 无法使用 jQuery.ajax() 从 Yelp API 检索数据

转载 作者：行者123 更新时间：2023-11-30 11:16:21 32 4
gpt4 key购买 nike

我正在尝试使用 jQuery.ajax() 方法从 Yelp API 检索 JSON 数据，但它在控制台中不显示任何内容。

新的 Yelp 授权只需要将 header 发送为:

"Authorization": "Bearer <apikey>"

以及带参数的 GET 请求 URL。 Postman 正在显示结果，但我无法在我的 API 中使用它。我的 .ajax 代码在这里:

var myurl = "https://api.yelp.com/v3/businesses/search?term=by-chloe&location=boston";

$.ajax({
  url: myurl,
  headers: {
    'Authorization': 'Bearer xxxxxxxxxxxxx',
  },
  method: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log('success: ' + data);
  }
});

我需要对此进行任何更改还是有什么问题？

最佳答案

我在测试您的脚本时发现问题只是与 CORS 相关的问题；通过将 CORS-anywhere API 附加到 URL，我能够使用与你完全相同的代码访问你的端点。尝试下面的代码(只需交换您的 API key )

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
      <title>Ilan's Test</title>
   </head>
   <body>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
      <script>
         var myurl = "https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=by-chloe&location=boston";

         $.ajax({
            url: myurl,
            headers: {
             'Authorization':'Bearer xxxxxxxxxxxxxxxxxxxxxxx',
         },
            method: 'GET',
            dataType: 'json',
            success: function(data){
                console.log('success: '+data);
            }
         });      

      </script>
   </body>
</html>

//编辑 -- 请参阅下面的代码，了解如何使用从 API 返回的值。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
      <title>Ilan's Test</title>
   </head>
   <body>

   <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div id="results">

                </div>
            </div>
         </div>
   </div>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
      <script>
         var myurl = "https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=by-chloe&location=boston";

         $.ajax({
            url: myurl,
            headers: {
             'Authorization':'Bearer xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
         },
            method: 'GET',
            dataType: 'json',
            success: function(data){
                // Grab the results from the API JSON return
                var totalresults = data.total;
                // If our results are greater than 0, continue
                if (totalresults > 0){
                    // Display a header on the page with the number of results
                    $('#results').append('<h5>We discovered ' + totalresults + ' results!</h5>');
                    // Itirate through the JSON array of 'businesses' which was returned by the API
                    $.each(data.businesses, function(i, item) {
                        // Store each business's object in a variable
                        var id = item.id;
                        var alias = item.alias;
                        var phone = item.display_phone;
                        var image = item.image_url;
                        var name = item.name;
                        var rating = item.rating;
                        var reviewcount = item.review_count;
                        var address = item.location.address1;
                        var city = item.location.city;
                        var state = item.location.state;
                        var zipcode = item.location.zip_code;
                        // Append our result into our page
                        $('#results').append('<div id="' + id + '" style="margin-top:50px;margin-bottom:50px;"><img src="' + image + '" style="width:200px;height:150px;"><br>We found <b>' + name + '</b> (' + alias + ')<br>Business ID: ' + id + '<br> Located at: ' + address + ' ' + city + ', ' + state + ' ' + zipcode + '<br>The phone number for this business is: ' + phone + '<br>This business has a rating of ' + rating + ' with ' + reviewcount + ' reviews.</div>');
                  });
                } else {
                    // If our results are 0; no businesses were returned by the JSON therefor we display on the page no results were found
                    $('#results').append('<h5>We discovered no results!</h5>');
                }
            }
         });      

      </script>
   </body>
</html>

请记住交换您的 API key 以使上述示例正常运行。

CORS 通常在服务器端启用；这是一种防止未经授权的域连接和获取超出允许范围的数据的方法；我认为如果您将服务器的 IP 地址列入白名单，您可能仍然会遇到问题；我已经构建了许多项目，这些项目都需要绕过 CORS(使用 CORS-Anywhere API，或者通过请求 JSONP 数据类型)。 Cors-Anywhere 通常是一个开源 API，您可以在自己的服务器上实现它，也可以从 heroku URL 继续使用它；无论哪种方式，您都应该能够完成您的项目。

如果上面的代码示例对您有用，请告诉我；谢谢!- 伊兰

关于javascript - 无法使用 jQuery.ajax() 从 Yelp API 检索数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51391801/

32 4 0
文章推荐： javascript - Rollup 要我创建全局变量。我如何使用 'export default' ？
文章推荐： javascript - 在对象 JavaScript 中关联两个键
文章推荐： java - 如何使用 Activity 正确应用和自定义全局抽屉导航
文章推荐： javascript - 如何制作 bundle.css 和 bundle.js 文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com