如何在不刷新和使用 JQuery/AJAX 的情况下从服务器获取响应？答案

【问题标题】：How to get response from server without refreshing and using JQuery/AJAX?如何在不刷新和使用 JQuery/AJAX 的情况下从服务器获取响应？
【发布时间】：2017-11-01 21:02:07
【问题描述】：

是否有任何“正确”的方法可以在不使用 JQuery/AJAX 并且当然不刷新页面的情况下从服务器获取响应？ server.js：

 var http = require('http'); 
 var url = require('url'); 
 var qs = require('querystring'); 
 var static = require('node-static'); 
 var file = new static.Server('.');     

 http.createServer(function(req, res) { 
    if (req.method == 'POST' && req.url == "/reglog.html") { 
        var body = ''; 
          req.on('data', function (data) { 
            body += data; 
            // Destroy connection if data is too large for it
            if (body.length > 1e6) { 
            req.connection.destroy();
            }
          }); 
          req.on('end', function () { 
            //it's time to parse body 
            var post = qs.parse(body); 
            //send response everything is ok
            if (post.email.length > 0 && post.pswrd.length > 0 && post.login.length > 0)     { 
              //also console.log to see what was sent from client
              console.log(post); 
              res.end('Everything is good!'); 
            } else { 
              // ...or not ok 
              res.end('Everything is bad!'); 
            } 
          }); 
        } else if (method = 'GET') { 
          file.serve(req, res); 
        } 
}).listen(8080);

所以，有 reglog.js：

    var xhr = new XMLHttpRequest();
    var uemail = document.getElementById("email");      //HTML element for user's email
    var ulogin = document.getElementById("login");      //HTML element for user's login
    var upswrd = document.getElementById("pswrd");      //HTML element for user's password
    var message = document.getElementById("message");   //HTML element for response from server

function hide(tout) {
    if (tout === undefined) tout = 2500;
    return setTimeout(function() {
        message.innerHTML = "";
    }, tout);
}

document.getElementById("btn").onclick = (function createUser(){
    var email = uemail.value;                               
    var login = ulogin.value;                               
    var pswrd = upswrd.value;
    //XHR part starts//
    var body = "email="+email+"&login="+login+"&pswrd="+pswrd;
    //I know that email, login and pswrd should be with encodeURIComponent, but in my case it's not a problem and using it won't solve my main problem
    xhr.open("POST","/reglog.html",true);
    xhr.send(body);
    message.style.color = "black";
    xhr.onload = function() {
        message.innerHTML = xhr.responseText;
    }
    //XHR part ends//
});

document.getElementById("lbtn").onclick = (function logMenu(){
    document.getElementById('logform').style.display = "block";
    document.getElementById('regform').style.display = "none";
});

document.getElementById("rbtn").onclick = (function regMenu(){
    document.getElementById('regform').style.display = "block";
    document.getElementById('logform').style.display = "none";
});

还有reglog.html：

<HTML>
<HEAD>
  <meta charset="utf-8">
  <style>
    .button{
    position: absolute;
    top: 45%;
    bottom: 55%;
    left: 15%;
    }
  </style>  
</HEAD>

<BODY>

<form id="regform" action="/reglog.html" style="display:block;">
        <center><p>Register</p>

    E-mail: <input type="email" id="email" name="email" autocomplete="off"><br>
    Login: <input type="text" id="login" name="login" required autocomplete="off"><br>
    Password: <input type="password" id="pswrd" name="password" required autocomplete="off"><br>
    <span id="message"></span><br>
    <div class="button">
    <input type="submit" id="btn" value="Register"/><br><br>
    <input type="button" id="lbtn" value="Back to log in"/></div>
    </center>
</form>

<form id="logform" style="display:none;">
            <center><p>Log in</p>

    Login: <input type="text" id="login2" autocomplete="off"/><br>
    Password: <input type="password" id="pswrd2" autocomplete="off"/><br>
    <span id="message2"></span><br>
    <div class="button">
    <input type="button" id="btn2" value="Log in"/><br><br>
    <input type="button" id="rbtn" value="Registration"/></div>
    </center>
</form>

<script async src="/reglog.js"></script>
</BODY>

</HTML>

如你所见，我可以在客户端得到响应

<span id="message"></span>

但我可以看到它约 0.5 秒，然后会刷新页面。这不是查看结果的最佳方式。我的问题：是否有可能在“跨度”中看到此响应超过 ~0.5 秒？我的意思是，也许刷新页面然后显示此响应？我不知道该怎么做，因为总是有响应（持续 0.5 秒）然后页面刷新。另外我不知道如果没有 AJAX/JQuery 是否可以做到这一点。

我很乐意得到任何帮助，因为这个问题折磨了我两天，我没有通过谷歌找到任何合理的答案。

【问题讨论】：

标签： javascript html node.js post xmlhttprequest

【解决方案1】：

您的代码看起来不错，您只需要在单击提交按钮时阻止表单提交传统（页面重新加载）方式的默认操作即可。

document.getElementById("btn").onclick = (function createUser(e){
    e.preventDefault();
    // rest of function
});

【讨论】：