从node.js后端控制前端javascript

Question

我正在构建一个聊天应用程序，我想要求用户输入他们的用户名。 JQuery前端代码将表单滑入视图（准备就绪），将数据存储到变量中，然后加载聊天（当按下Enter键或按钮时）。除非我在服务器端验证用户输入，否则如何停止该动画？我使用node.js作为后端。有任何想法吗？

在此先感谢！

前端的jQuery：

var nameChoice, roomChoice; //to store user input 
 

 
var initName = function() { 
 

 
\t \t nameChoice = $("#init-name input").val(); //save chosen name in nameChoice 
 
\t \t $("#current-name").text("Username: " + nameChoice); //put chosen name in chat header 
 
\t \t $("#init-name").animate(
 
\t \t \t {"left" : "-35%"}, 300, 
 
\t \t \t function() { 
 
\t \t \t \t $(this).addClass("hidden"); 
 
\t \t \t \t $("#init-room").removeClass("hidden"); 
 
\t \t \t \t $("#init-room").animate({"left" : "35%"}, 300); 
 
\t \t }); //remove name form and slide in room form in callback 
 
\t } //end initName 
 

 
var initRoom = function() { 
 
\t \t roomChoice = $("#init-room select").val(); //save chosen room in roomChoice 
 
\t \t $("#current-room").text("Room: " + roomChoice); //put chosen room in chat header 
 
\t \t $("#init-room").animate(
 
\t \t \t {"left" : "-35%"}, 300, 
 
\t \t \t function() { 
 
\t \t \t \t $(this).addClass("hidden"); 
 
\t \t \t \t $("#chat-main").removeClass("hidden"); 
 
\t \t }); //remove room form and show page in callback 
 
\t } //end initRoom 
 

 
var btnHover = function() { 
 
\t $(".btn-form").hover(
 
\t \t function() { 
 
\t \t \t $(this).stop().animate(
 
\t \t \t { 
 
\t \t \t \t backgroundColor : "#FFBD7A" 
 
\t \t \t }, 300); 
 
\t \t }, 
 
\t \t function() { 
 
\t \t \t $(this).stop().animate(
 
\t \t \t { 
 
\t \t \t \t backgroundColor : "white" 
 
\t \t \t }, 300); 
 
\t \t }); 
 
} 
 

 
var init = function() { 
 

 
\t $("#init-name").removeClass("hidden").animate({"left" : "35%"}, 300); //slide in name form 
 
\t 
 
\t $(document).keydown(function(event) { //submit choice on enter key 
 
\t \t if (event.which === 13) { 
 
\t \t \t if (!$("#init-name").hasClass("hidden")) { //if user is choosing name 
 
\t \t \t \t event.preventDefault(); 
 
\t \t \t \t initName(); //call initName function 
 
\t \t \t } 
 

 
\t \t \t if (!$("#init-room").hasClass("hidden")) { //if user is choosing room 
 
\t \t \t \t event.preventDefault(); 
 
\t \t \t \t initRoom(); //call initRoom function 
 
\t \t \t } 
 
\t \t } 
 
\t }); //end enter key submission 
 

 
\t $("#init-name .btn-form").click(initName); 
 
\t $("#init-room .btn-form").click(initRoom); 
 

 
\t btnHover(); \t 
 
} //end init 
 
$(document).ready(init);

我还在学习的节点，所以还没有后端代码...

Answer 1

这个粗糙的代码...

$http.post("/login", {"username":username, "password": password}).then(function(response) { 

    console.log("success - do animation here"); 

}.catch(function(response) { 

    console.log("failure a non 2xx HTTP response - handle error here"); 
}); 

此代码是粗俗的，因为http请求sho可能会在服务中，我也没有弄清这个代码，但是你应该得到一般的IDEA！

道歉，这为角jQuery是问的...在这里去......

$.ajax({ 
    method: "POST", 
    url: "/login", 
    data: { username: username, password: password } 
}) 
.then(
    function(data, textStatus, jqXHR) { 
    console.log("success - do animation here"); 
    }, 
    function(jqXHR, textStatus, errorThrown) { 
    console.log("failure a non 2xx HTTP response - handle error here"); 
    } 
); 

从来没有在jQuery的前试过，但该文档建议这种方法。 检查文档在...

http://api.jquery.com/jquery.ajax/

感谢

编辑：在承诺的情况下基于jQuery代码不可用：

$.ajax({ 
    method: "POST", 
    url: "/login", 
    data: { username: username, password: password } 
}) 
// for older versions of jQuery, replace .done and .fail with .success and .error 
.done(function(data, textStatus, jqXHR) { 
    console.log("success - do animation here"); 
}) 
.fail(function(jqXHR, textStatus, errorThrown) { 
    console.log("failure a non 2xx HTTP response - handle error here"); 
});