Question

当用户单击表单时，我向数据库服务器发送一个http post请求。依次将发布请求发送回用户服务器。

我的问题是我无法将此数据库结果从数据库服务器发布到pug。我不确定如何在此处实现AJAX。

我尝试发送服务器http请求本身，但是不起作用。我也尝试将结果也渲染到代码中的pug文件中，而不是运气！

script.js：

// analyze sentiment button
function analyzeSentiment() {
    // get and post filter to the backend for sentiment score    
    let form = $("#searchSentiment-form");
      let query = form.serialize();
    console.log(query);
    $.post('/', query);
}

pug文件

 form#searchSentiment-form(action='javascript:analyzeSentiment()', method='POST')
        input(type="text" id="sentimentFilter" name="sentimentFilter" placeholder="Search a filter" required)
         button(type="submit" id="sentiAnalysis" name="sentiAnalysis") ANALYZE

index.js

 if(req.body.sentimentFilter) {
        // 1) Convert Tweet into JSON 
        tweetJSON = { sentimentFilter: req.body.sentimentFilter };
        console.log("Analyze this:", tweetJSON)

        // 2) Send via HTTP post request to the ANALYSIS-SERVER
        request({
            url: "http://LoadBalancer-1284897978.us-west-2.elb.amazonaws.com",
            method: "POST",
            json: true,   // <--Very important!!!
            body: tweetJSON
        }, function (error, response, body){
          if(error) {
            console.log("HTTP POST: Sending tweets to analysis-server Failed", error);
          } else {
            console.log("Success! Send sentiment request to analysis-server");
            }
          });

      //  receiving post result from server with results              
      } else if (req.body.score) {
         let score = req.body.score;

           res.render('index', {score:score});
          let JSONscore = { userScore: score};
               // 2) Send via HTTP post request to the LOAD-BALANCER FOR TWITTER-SERVER
        request({
          url: "http://52.26.216.28:3000",
          method: "GET",
          json: true,
          body: JSONscore
         }, function (error, response, body){
           if(error) {
            console.log("ERROR: COULD NOT SEND SCORE TO OWN USER-SERVER...", error);

           } else {
            console.log("SUCCESSFULY SENT SCORE TO OWN USER!..");
           }
        });

          console.log("Received Score is ", req.body.score);

       }

Answer 1

您的问题指出，您将请求发送到数据库服务器，然后数据库服务器将请求发送到node.js服务器，这是不正确的。用户将请求发送到node.js服务器，该服务器随后将新请求创建到数据库服务器。当node.js服务器在回调中收到响应时，您希望将最终响应发送回客户端。

如果要在客户端中执行此操作而不重新加载模板，则需要：

仅在响应中发送JSON，
使用jquery处理响应，然后
使用jquery更新DOM

首先，仅发送JSON。这两个回调都没有向客户端发送响应，这是一个很大的问题，看起来您的服务器正在挂起。

这是在第一个回调中将响应从数据库返回到客户端的方法。 Expressjs在响应（res）对象上提供了一种快捷方法，该方法可以干净快速地将JSON有效负载正确地发送回去：

function (error, response, body){
  if(error) {
    console.log("HTTP POST: Sending tweets to analysis-server Failed", error);
  } else {
    console.log("Success! Send sentiment request to analysis-server");
    res.json(response);
  }
}

确保所有回调中都包含该内容，然后继续处理代码中的第二个问题，处理Ajax响应。

这是jquery $.post docs中示例代码的相关部分：

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post( "example.php", function() {
  alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  });

您需要将.done和.fail函数添加到ajax代码中，以便您可以监听服务器的响应。

最后，您可能希望向用户显示结果，因此将div添加到您的哈巴狗中：

form#searchSentiment-form(action='javascript:analyzeSentiment()', method='POST')
  input(type="text" id="sentimentFilter" name="sentimentFilter" placeholder="Search a filter" required)
  button(type="submit" id="sentiAnalysis" name="sentiAnalysis") ANALYZE
div#response

然后在您的.done通话中，您可以显示结果：

// analyze sentiment button
function analyzeSentiment() {
    // get and post filter to the backend for sentiment score    
    let form = $("#searchSentiment-form");
      let query = form.serialize();
    console.log(query);
    $.post('/', query).done(function(data){
      console.log(data);
      $('#results').html(data);
    });
}

如何将HTTP Post Request结果呈现给哈巴狗？

1 个答案: