如何從服務器獲得響應而無需刷新和使用JQuery/AJAX？

是否有任何「正確」的方式來獲得服務器的響應，而不使用JQuery/AJAX，當然沒有刷新頁面？ server.js：如何從服務器獲得響應而無需刷新和使用JQuery/AJAX？

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可以做到這一點。

我很高興得到任何幫助，因爲這是折磨我兩天的問題，我沒有通過谷歌找到任何合理的答案。

來源

2017-05-31 NebSehemvi

您的代碼看起來很好，您只需要在單擊提交按鈕時阻止提交傳統（頁面重新加載）方式的表單的默認操作。

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

來源

2017-05-31 22:02:35 James

耶！有用！謝謝！ – NebSehemvi

如何從服務器獲得響應而無需刷新和使用JQuery/AJAX？

回答

相關問題