如何从服务器获取响应而无需刷新和使用JQuery / AJAX？

Question

Is there any "right" way to get response from server without using JQuery/AJAX and of course without refreshing page? 是否有任何“正确”的方法可以在不使用JQuery / AJAX的情况下获得服务器的响应，而无需刷新页面呢？ server.js: 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);

So, there's reglog.js: 因此，有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";
});

And reglog.html : 和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>

As you can see I can get response on client side in 如您所见，我可以在客户端获得响应

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

But I can see it for ~0.5 sec and after that there would be page refreshing. 但是我可以看到它约0.5秒，然后页面就会刷新。 And that is not the best way to see results. 那不是查看结果的最佳方法。 My question: is it possible to see this response in "span" for more than ~0.5 sec? 我的问题：是否有可能在“ span”中看到此响应超过0.5秒？ I mean, maybe refresh page and then show this response? 我的意思是，也许刷新页面然后显示此响应？ I don't get how to do it because there is always response coming (for 0.5 sec) and then page refreshing. 我不知道该怎么做，因为总是会出现响应（持续0.5秒），然后刷新页面。 Also I don't know if it's possible to do that without AJAX/JQuery. 另外我不知道没有AJAX / JQuery是否有可能做到这一点。

I would glad to get any help because it's the question that torments me for two days, and I didn't find any reasonable answer via google. 我很乐意得到任何帮助，因为这是困扰我两天的问题，而且我没有通过Google找到任何合理的答案。

Answer 1

Your code looks fine you just need to prevent the default action of the form submitting the traditional (page reload) way when you click the submit button. 您的代码看起来不错，您只需要在单击“提交”按钮时阻止表单的默认操作以传统方式提交（页面重新加载）即可。

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

如何从服务器获取响应而无需刷新和使用JQuery / AJAX？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-05-31 22:02:35

如何从服务器获取响应而无需刷新和使用JQuery / AJAX？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-05-31 22:02:35

解决方案1
0 已采纳 2017-05-31 22:02:35