从node.js后端控制前端javascript

我正在构build一个聊天应用程序，我想要求用户input他们的用户名。 JQuery前端代码将表单滑入视图（就绪），将数据存储到variables中，然后加载聊天（当按下input键或button时）。 在服务器端validation用户input之前，如何停止该animation？ 我使用node.js作为后端。 有任何想法吗？

提前致谢！

前端jQuery：

var nameChoice, roomChoice; //to store user input var initName = function() { nameChoice = $("#init-name input").val(); //save chosen name in nameChoice $("#current-name").text("Username: " + nameChoice); //put chosen name in chat header $("#init-name").animate( {"left" : "-35%"}, 300, function() { $(this).addClass("hidden"); $("#init-room").removeClass("hidden"); $("#init-room").animate({"left" : "35%"}, 300); }); //remove name form and slide in room form in callback } //end initName var initRoom = function() { roomChoice = $("#init-room select").val(); //save chosen room in roomChoice $("#current-room").text("Room: " + roomChoice); //put chosen room in chat header $("#init-room").animate( {"left" : "-35%"}, 300, function() { $(this).addClass("hidden"); $("#chat-main").removeClass("hidden"); }); //remove room form and show page in callback } //end initRoom var btnHover = function() { $(".btn-form").hover( function() { $(this).stop().animate( { backgroundColor : "#FFBD7A" }, 300); }, function() { $(this).stop().animate( { backgroundColor : "white" }, 300); }); } var init = function() { $("#init-name").removeClass("hidden").animate({"left" : "35%"}, 300); //slide in name form $(document).keydown(function(event) { //submit choice on enter key if (event.which === 13) { if (!$("#init-name").hasClass("hidden")) { //if user is choosing name event.preventDefault(); initName(); //call initName function } if (!$("#init-room").hasClass("hidden")) { //if user is choosing room event.preventDefault(); initRoom(); //call initRoom function } } }); //end enter key submission $("#init-name .btn-form").click(initName); $("#init-room .btn-form").click(initRoom); btnHover(); } //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请求应该是在一个服务，也没有linting这个代码，但你应该得到一般的IDEA！

APOLOGIES这是angular度，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"); });