javascript - 从 node.js 后端控制前端 javascript

Question

我正在构建一个聊天应用程序，我想要求用户输入他们的用户名。 JQuery 前端代码将表单滑入 View (准备就绪)，将数据存储到变量中，然后加载聊天(当按下回车键或按钮时)。在验证服务器端的用户输入之前，如何停止该动画？我在后端使用 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);

我还在学习 Node ，所以还没有后端代码......

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 请求可能在服务中，而且我没有检查这段代码，但你应该得到一般的想法!

抱歉这是 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/

谢谢

编辑:如果基于 promise 的 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");
});