Question

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

提前致谢！

前端jQuery：

＆＃13;

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

＆＃13;

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

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！

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

之前没有在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");
});

从node.js后端控制前端javascript

1 个答案: