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

Question

When a user clicks on the form, I send a http post request to database server. Which in turn sends post request back to user server.

My problem is that I can't post this database result recieved from database server to pug. I am not sure how to implement AJAX here.

I have tried sending the server http request itself, doesn't work. I have also tried to render the results to the pug file in the code as well, not luck!

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 file

 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

Your question states that you send the request to the database server which then sends the request to the node.js server, this is not correct. The user sends the request to the node.js server, which then creates a new request to the database server. When the response is received by the node.js server in the callback, at that time you want to send the final response back to the client.

If you want to do this in the client without reloading the template then you need to:

1. Only send JSON in the response,
2. Handle the response with jquery, and then
3. Update the DOM using jquery

First, only send JSON. None of the two callbacks are sending a response back to the client, that's a really big problem and it will look like your server is hanging.

This is how to return the response from the database to the client in your first callback. Expressjs has a shortcut method on the response ( res ) object that cleanly and quickly sends a JSON payload back properly:

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);
  }
}

Make sure you have that in all callbacks, then let's move on to the second issue in your code, handling the Ajax response.

Here is the relevant part of the sample code from the 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" );
  });

You'll want to add the .done and .fail functions to your ajax code so you have something listening for that response from the server.

Finally, you'll probably want to show the user the result, so add a div to your 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
div#response

Then in your .done call you can display the results:

// 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);
    });
}