node express 里面的 res.write 在响应 html 的时候 表现不一致

Question

想做一个这样的效果

var express = require('express');
var app = express();
const fs = require('fs')
const path = require('path')
var querystring = require('querystring');

app.use(express.static('./'));

//跳转index
app.get('/', function(req, res) {
    if(req.cookies) {
        res.send(`已经登陆有Cookies:${req.cookies}`)
        res.end()
    } else {
        var content = fs.readFileSync('./cookie-index.html');
        res.writeHead(200, {
            'Content-Type': 'text/html'
        });
        res.write(content);        **//这里的content 直接显示为当前页面**
        res.end();
    }
});

//处理post登录信息
app.post('/login', function(req, res) {
    var body = "";

    req.on('data', function(chunk) {
        body += chunk;
    });
    
    
    req.on('end', function() {
        // 解析参数
        body = querystring.parse(body);
        // 设置响应头部信息及编码
        res.writeHead(200, {
            'Content-Type': 'text/html',
        });
        if(body.name) { // 输出提交的数据
            res.write(`<div>显示在xhr.responseText里</div>`);
        **//这里，不能直接显示为当前页面，而是在xhr.responseText 里面**
        } else { // 输出表单
            res.write(postHTML)
        }
        res.end()
    })

});

想问一下要怎么实现动图的效果

Answer 1

// ajax.js
$(function(){
   $('#btn').click(function(){

      var name = $('input').eq(0).val()
      
      var pass = $('input').eq(1).val()

      $.ajax({
          url : `/login`,
          data : {name : name, pass : pass},
          cache : false,
          timeout : 5000,
          dataType : 'json'
          type : 'POST',
          success : function(data){
             document.write(data)
          }
      })
   })
})

// router login

app.post('/login', function(req, res) {
    var body = "";

    req.on('data', function(chunk) {
        body += chunk;
    });
    
    
    req.on('end', function() {
        // 解析参数
        body = JSON.parse(body);
        // 设置响应头部信息及编码
        res.writeHead(200, {
            'Content-Type': 'text/html;charset=utf8',
        });
        if(body.name) { // 输出提交的数据
            res.write(`<div>用户名: ${body.name} <br> 网站 URL : ${body.pass} </div>`);
        
        } else { // 输出表单
            res.write(postHTML)
        }
        res.end()
    })

});