根据表单输入获取数据Javascript

Question

我有一个接受用户输入并将数据打印到网页的表单。我的目标是连接到 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 js 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});
});

我做错了什么？

Answer 1

我认为主要问题是由于您正在使用 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 
});

根据表单输入获取数据Javascript

Get data based on form input Javascript

javascript

handlebars.js

express-handlebars