Node.js和Express：加载后更新router.get和res.render对象

Question

I have this code, which is returns the following error on req.body.firstname.length inside router.use on the page load:

TypeError: Cannot read property 'length' of undefined

Because already checking the input forms value and the default value is undefined . I want to only check this code when it's getting req.xhr request from the AJAX form, not on the page load. Is there a way to achieve this?

router.use((req, res, next) => {
  if(req.body.firstname.length === 0) {
    var validateFirstname = false;
  } else {
    var validateFirstname = true;
  };
  if(validateFirstname === true && validateCaptcha === true) {
    console.log('SUCCESS: Form validated!');
  } else {
    console.log('ERROR: Form not validated!');
  };
  next();
});

The reason why it's in a router.use , not in router.post , because I want to share this logic for router.get also, where my template rendering resides.

UPDATE:

Here is the relevant full code to get the idea what's going on:

/////////////////////////////////////////////////////////////
// Nodemailer MIDDLEWARE
/////////////////////////////////////////////////////////////

router.post('/', (req, res, next) => {
  const firstname = req.body.firstname;
  req.firstname = firstname;

  if(req.firstname.length === 0) {
    var validateFirstname = false;
  } else {
    var validateFirstname = true;
  };

  if(validateFirstname === true) {
    console.log('SUCCESS: Form validated!');
    // send mail with defined transport object
    req.sending = true;
  } else {
    console.log('ERROR: Form not validated!');
    req.sending = false;
  };

  next();
});

router.use((req, res, next) => {
  // create reusable transporter object using the default SMTP transport
  req.transporter = nodemailer.createTransport({
    ...
  });
  // setup e-mail data with unicode symbols
  req.mailOptions = {
    ...
  };
  next();
});

/////////////////////////////////////////////////////////////
// Nodemailer
/////////////////////////////////////////////////////////////

router.post('/', (req, res, next) => {
  if(!req.xhr && req.sending === true) {
    // send mail with defined transport object
    req.transporter.sendMail(req.mailOptions, (err, info) => {
      if(err) {
        console.log('Error occurred');
        console.log(err.message);
      }
      console.log('Message sent successfully!');
      console.log('Server responded with "%s"', info.response);
      res.send('<div class="form-validation-success">SUCCESS: Message sent successfully!</div>');
    });
  } else {
    res.send('<div class="form-validation-error">ERROR: Message cannot be sent!</div>');
  };

/////////////////////////////////////////////////////////////
// INTERNAL API
// GET Contact page
/////////////////////////////////////////////////////////////

router.get('/', (req, res, next) => {
  res.render('contact', {
    title: 'Contact',
    formValidationError: req.displayBlock
  });
});

In my handebars template:

<div id="responseText"></div>

This code is now working but not updating the already rendered viewing template. I guess to only way to solve this to handle the server's response with AJAX, but how? This is the client-side AJAX code:

'use strict';

(function() {
  document.getElementById('xhr').onclick = function() { makeRequest(); };

  function makeRequest() {
    var firstname = document.getElementById('firstname').value;
    var data = { firstname: firstname };
    // instance of a class that provides this functionality
    var xhr = new XMLHttpRequest();
    // decide what you want to do after you receive the server response to your request
    xhr.onreadystatechange = function() {
      try {
        // process the server response
        if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
          // everything is good, the response is received
          //alert(xhr.responseText);
          document.getElementById('responseText').innerHTML = xhr.responseText;
        } else {
          // still not ready
          alert('There was a problem with the request.');
        };
      } catch(e) {
        console.log('Caught Exception: ' + e.description);
      };
    };
    // make the request
    xhr.open('POST', '/en/contact', true);
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    xhr.send(JSON.stringify(data));
  };
})();

It's always returning the There was a problem with the request error message, even when also returning xhr.responseText .

This router file resides at routes/contact.js and handling the requests at /:lang/contact . That's why you see '/' url in the file.

Answer 1

can you please add some more information on it....as it is very difficult to figure out the problem with this information.

you are trying a post on uri /en/contact but receiving a request on /