从node.js后端控制前端javascript

I am building a chat app and I want to ask users to input their username. JQuery front-end code slides a form into view (on ready), stores the data into variables and then loads the chat (when enter key or button is pressed). How do I stop that animation until I validate user input on server-side? I am using node.js for backend. Any ideas?

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

Thanks in advance!

提前致谢!

Front-end 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);

I'm still learning node, so no back-end code yet...

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

1 个解决方案

#1

rough code for this ...

粗略的代码......

$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");
});

This code is crude since the http request should prob be in a service, also I have not linted this code, BUT you should get the general IDEA!

这段代码很粗糙,因为http请求应该在服务中,我也没有提到这段代码,但是你应该得到一般的IDEA!

APOLOGIES THIS IS ANGULAR, JQUERY WAS ASKED FOR ... HERE GOES ...

APOLOGIES这是一个角落,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");
  }
);

Never tried this in Jquery before but the docs suggest this approach. Check the docs at ...

从来没有在Jquery尝试这个,但文档建议这种方法。查看文档...

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

Thanks

Edit: in case promise based jQuery code not available:

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

#1