如何在HTML中调用twitter API函数并显示结果？

Question

I have a working function that, when used in the app.js file, will successfully open a twitter stream and display the content below(if console.log is used instead of print). 我有一个工作功能，当在app.js文件中使用时，将成功打开Twitter流并在下面显示内容（如果使用console.log而不是print）。 However, when I take the function and put it in a script inside index.html, I get the error "referenceError: require not defined" I also get a GET error with the other scripts..perhaps I am referencing them incorrectly, but I've tried including them with only one . 但是，当我使用该函数并将其放在index.html内的脚本中时，出现错误“ referenceError：要求未定义” ，其他脚本也出现GET错误。也许我未正确引用它们，但是我曾经尝试只将它们包含在内。

I am trying to learn all this on my own. 我正在尝试自己学习所有这一切。 I have made a simply static website in the past, but only using html, css, and some basic jquery. 我过去制作了一个简单的静态网站，但仅使用html，css和一些基本的jquery。 I want to be able to stylize the text output by the function with css. 我希望能够使用CSS将样式输出的文本样式化。

<!DOCTYPE html>
<html>
<head>
<title>Streaming</title>
<script src="..Twitter/config.js"></script>
<script src="..Twitter/package.json"></script>
<script src="..Twitter/app.js"></script>
<script type = "text/javascript">


function displayStream() {
    var Twit = require('twit');
    var T = new Twit(config); 
    var stream = T.stream('statuses/filter', { track: 'Bernie Sanders' });
    var count = 0;
    var totalSentiment = 0;

      stream.on('tweet', function (tweet) {
      //Exclude retweets
        if(tweet.text.startsWith("RT") === false) {

          print(tweet.text)
          print("Sentiment score: " + sentiment(tweet.text).score)
          count += 1;
          totalSentiment += sentiment(tweet.text).score;
          print(count + " tweets analyzed");
          print("Aggregate Sentiment: " + totalSentiment);
          print("Average Sentiment:" + (totalSentiment/count).toFixed(2) + "\n");
};

});

};

 </head>
 <body onload="displayStream();">

     <h1>Welcome to my website</h1>


<p>displayStream()</p>

Answer 1

Using Ajax script you can request URL and get response in following way 使用Ajax脚本，您可以通过以下方式请求URL并获得响应

$.ajax({
  url: 'url',
})
.done(function(data) {
 document.getElementById("#myResponse").innerHTML=data;
})
.fail(function() {
  alert("Ajax failed to fetch data")
})

Using plain Jquery you can achieve same result by following way using Jquery load function 使用纯Jquery，您可以通过以下方法使用Jquery加载功能来获得相同的结果

$( "#div").load( "url", function( response, status, xhr ) {
console.log(response.ok);
document.getElementById("#myResponse").innerHTML=response;
if ( status == "error" ) {
}
});

Using pure javascript you can achieve using XMLHttpRequest 使用纯JavaScript可以实现XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
alert(xhr.responseText);
}
}
xhr.open('GET', 'url', true);
xhr.send(null);

Answer 2

For just javascipt you can use fetchApi . 对于仅javascipt，您可以使用fetchApi 。 It's will provide same feel as AJAX does. 它会提供与AJAX相同的感觉。

For example : 例如：

fetch('ApiToFetchTweets', {
        method: 'get'
        })
        .then(function(response) {
            console.log('response here: ',response);


        }).then(function(json) {
        //console.log('parsed json', json);
        }).catch(function(ex) {
        //console.log('parsing failed', ex);
        })

Thanks, 谢谢，

Dinesh 迪内希

如何在HTML中调用twitter API函数并显示结果？

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-04-14 04:23:57

解决方案2
1 2016-04-14 05:49:50

如何在HTML中调用twitter API函数并显示结果？

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-04-14 04:23:57

解决方案2 1 2016-04-14 05:49:50

解决方案1
1 已采纳 2016-04-14 04:23:57

解决方案2
1 2016-04-14 05:49:50