从node.js后端控制前端javascript

Question

我正在构建一个聊天应用程序，我想请用户输入其用户名。 JQuery前端代码将表单滑动到视图中（就绪），将数据存储到变量中，然后加载聊天记录（当按下Enter键或按钮时）。 在验证服务器端的用户输入之前，如何停止该动画？ 我正在使用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请求应该存在于服务中，我也没有删掉该代码，但是您应该获得通用的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");
});