Question

在我的登录/注册表单中，我使用了jquery ajax，但它不起作用，当用户输入了我的mongo数据库中不存在的错误信息时，它应该在我的div中添加错误消息，表明该用户未注册（无需重新加载）当然），但它代替它发送我的错误消息，如res.send方法（在空白页中），这里是代码

app.post('/login',
async (req, res) => {

    try {
        const { username, password } = req.body;
        const user = await User.findOne({ username, password }).select('-password').lean();
        if (!user) {
            res.status(500).send({error: "user is not registered"});

            return;
        }

        req.session.user = user; 
        res.redirect('/dash')  
        return res.status(200).send('Session ID: ' + req.sessionID);


    }
    catch (error) {
        res.status(500).send(error.message);
    }
});

nodeJS代码

<body>
<form action="/login" method="POST"> 
    <input type="text" placeholder="username" name="username" id="username"> 
    <input type="password" placeholder="pass" name="password" id="password"> 
    <button type="submit" id="zaza">Login</button>
    <div id="errMsg"></div>
     <br/>
    or <strong><a href="/reg">Sign Up</a></strong>
  </form>
  <script type="text/javascript">

    $('#zaza').on('click', function(event) {
event.preventDefault();
const username = $('#username').val(), password = $('#password').val();

$.ajax({
type: 'POST',
data: { username: username, password: password },
url: 'http://localhost:8080/login',
success: function(sessionID) {
  console.log(sessionID);
},
error: function(xhr, status, err) {
  const errMsg = xhr.responseText; // Your error msg
  $('#errMsg').html(errMsg);
 }
 });
 });

</script>

ajax代码

Answer 1

您不能同时发送重定向和状态信息。

更好地检测请求是否为ajax，json，并根据要求响应并提供适当的响应。

这是解决方法：

1）修复服务器端代码：

app.post('/login', async (req, res) => {
    try {
        const {username, password} = req.body;
        const user = await User.findOne({username, password}).select('-password').lean();
        if (!user) {
          return res.status(404).send({
            message: 'user is not registered'
          });
        }

        req.session.user = user;

        const redirectTo = '/dash';

        if (
          req.is('json') // request content type is json
          || // or
          req.xhr // is ajax
        ) { 
          // respond with json response
          return res.status(200).status({redirectTo});
        }

        // not ajax request 
        // then respond redirect header
        res.redirect(redirectTo);
    }
    catch (error) {
        res.status(500).send({
          message: error.message
        });
    }
});

2）修复客户端代码：

<form id="login" action="/login" method="POST"> 
  <label>
    Username: 
    <input type="text" name="username" value="">
  </label> 

  <label>
    Password:
    <input type="password" name="password" value="" autocomplete="off"> 
  </label>

  <button type="submit">Login</button>
  <br/>
  <div class="error"></div>
</form>

<script type="text/javascript">
$(function() {

  var $loginForm = $('form#login');

  // handle form submit event
  $loginForm.on('submit', function(e) { 
    e.preventDefault(); // prevent browser doing default post

    $.ajax({
      type: $loginForm.attr('method'), // get method from form tag
      url: $loginForm.attr('action'),  // get action url from form tag
      data: $loginForm.serialize(),    // sending url-encoded string from fields

      // something went wrong
      error: function(xhr, textStatus, error) {
        try {
          var response = JSON.parse(xhr.responseText); 
          if (response.message) { // if json response has message field
            $loginForm.find('.error:first').html(response.message);
          }
        }
        catch (error) { // tried to parse response string as json, but could not - then just put error string to div
          $loginForm.find('.error:first').html(xhr.responseText);
        }
      },

      success: function(response) {
        if (response.redirectTo) {
          window.location.href = response.redirectTo;
        }
      }
    });

  });

});
</script>

参考文献：

1）jQuery preventDefault

2）jQuery serializeArray

3）jQuery $.ajax fields and explanation

4）ExpressJS detect ajax request

5）ExpressJS req.is

错误消息不是异步显示的ajax

1 个答案: