解释如何使用Jquery从twitter搜索API提取数据并在HTML上打印

Explanation for extracting data from twitter search API and printing on the HTML using Jquery

本文关键字:数据 HTML 打印 提取 API 何使用 Jquery 搜索 twitter 解释      更新时间:2023-09-26

我是javascript和jquery的新手。我正在制作一个web应用程序,需要从推特的数据。这是我的两个密码。第一个是朋友送的,另一个是我自己的版本。现在我的版本不起作用了。下面是我的几个问题:

1)在版本1中,为什么我们将e传递给函数?2)为什么我们在dataType中使用"jsonp"?3)是什么让我的代码不能工作?

是什么使代码版本1工作?

工作版本

$('#input').submit(function(e){
    e.preventDefault();
    e.stopPropagation();
       var hashtag = $(this).find('input[name="hashtag"]').val();
        var twitterapi = "http://search.twitter.com/search.json?";
        jQuery.ajax({
          type: "GET",
          url: twitterapi,
          data: {
            "q": hashtag,
            "rpp": 1000
          },
          dataType: 'jsonp'
        }).done(function (response) {
          var results = response.results;
          for (var i = 0; i < results.length; i++) {
            $("#tweet").append("<p class='tweet'>" +
              "<span class='username'>" +
              results[i].from_user +
              "</span> <span class='tweet_content'> " +
              results[i].text + "</span></p>");
          }
        });

我的版本

var hashtag = $(this).find('input[name="hashtag"]').val();
        var twitterapi = "http://search.twitter.com/search.json?";
        var tweetspresent = results.length;
         jQuery.ajax(
         {
              type: "GET",
              url: twitterapi ,
              data: {"q": hashtag,"rpp":1000},
              dataType: 'jsonp',
            });
        }).done(function(results)
            {
               for(i=0;i<tweetspresent;i++)
                 {
                   $("#tweet").html("<p> Name: " + results[i].from_user + " - " + results[i].text + "</p>");
                 }
            });
});

1)"e"代表事件,在这种情况下,它是传递给函数的submit事件对象。你可以在这里找到更多关于活动的信息。下面是对例如preventDefault方法所做的事情的更多解释。

2)当你从一个不同的域使用ajax调用获取数据(例如your-website.com执行javascript从twitter.com获取数据),我们说的"跨域"请求。出于安全考虑,这是不允许的。有几种方法可以解决这个问题。其中之一是jsonp。对于具有本机支持CORS的新浏览器,您不再需要使用jsonp类型了。

3)你不说什么不工作,所以先做一点调试(在现代浏览器中)使用console.log(变量),检查你的完成回调是否被调用,如果是,记录响应,看看是什么结构(或更好地检查twitter api)。

编辑你不需要向done函数传递任何东西,那只取决于你的需要。执行jQuery时。ajax函数,它会做任何你告诉它做什么,当它完成它返回对象(s),你可以进一步使用。在您的示例中,您需要一种方法来访问从Twitter返回的数据。我强烈建议您阅读更多关于jQuery ajax的内容。