根据表单输入获取数据Javascript

时间:2018-05-04 08:20:48

标签: javascript handlebars.js express-handlebars

我有一个表单,用于输入用户并将数据打印到网页。我的目标是连接到Twitter API并根据输入结果打印数据。例如,如果用户输入某个#标签,那么我希望打印带有输入数据的所有主题标签。我能够获取输入数据并将其打印出来,我还可以在点击时打印标签中的数据(没有输入数据)。但是,当我尝试使用输入表单实现Twitter搜索时,缺少某些东西。

我的表格

<form class="form" action="/" method="post" name="form">              
    <input type="text" name="twdata" placeholder="Add data">
    <button type="submit">Submit</button>
</form>

我使用Twitter API(不工作)

var theTweets = [];

app.post('/',function(req,res){
    // Grab form data and push it to array
    var twdata = req.body.twdata;

    var params = {
       q: twdata
    }

    client.get('search/tweets', params, getData);

    function getData(err, data, response) {
        var content = data.statuses;
        for (var i = 0; i < content.length; i++) {
            theTweets.push( content[i].text );
        }
    }

    // Display form data on home template
    res.render('home', {twData: theTweets});
});

我的js没有Twitter API(工作)

var formData = [];

app.post('/',function(req,res){
    // Grab form data and push it to array
    var twdata = req.body.twdata;
    formData.push(twdata);

    // Display form data on home template
    res.render('home', {dataInfo: formData});
});

我做错了什么?

1 个答案:

答案 0 :(得分:2)

我认为主要的问题是你正在使用Node.js(Express)并且你必须知道异步调用,这是使用Node.js时的一个主要问题,我们必须改变我们的想法执行顺序,因为它不是程序执行。我尝试将您的程序模拟为Node.js普通应用程序,请查看以下内容:

var theTweets  = [];

var res = {
    render: function (page, objData) {
        console.log(page +' '+objData.tweets);
    }
}
var req = {
    body: {
        twdata: '@user'
    }
}

var app = {
    post: function (page, callback) {
        console.log('Page invoked '+page);
        callback(req, res);
    }
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

var client = {
    get : async function (tweets, params, callback) {
        var err = '';
        var data = {statuses: [{text:'tweet01'},{text:'tweet02'}]};
        var response = {};
        await sleep(2000); //code for simulate delay in async call to twitter
        callback(err, data, response);
    }
}

app.post('/', function(req, res) {
    var twdata = req.body.twdata;

    var params = {
       q: twdata
    }

    client.get('search/tweets', params, getData);

    function getData(err, data, response) {
        var content = data.statuses;

         content.forEach ((tweet)=>theTweets.push(tweet.text));

        res.render('home', {'tweets': theTweets});  //correct 
    }
    //res.render('home', {'tweets': theTweets});    //wrong 
});