jquery - jquery promises 我做错了什么

Question

当用户单击按钮时，我们应该检查他们是否通过 ajax 请求登录。只有在 ajax 请求返回后，我的表单才会显示。

ajax 请求返回一个错误（出于说明目的），但我的表单仍然显示。

如何修改我的代码，以便 display_form() 仅在 check_loggedin() 完成后运行？

非常感谢。

PS我知道有很多关于承诺的帖子，但尽管我尝试过，但我还是没能理解它们——如果有人可以修改我的代码，这样我就会明白我哪里出错了——谢谢。

$(document.body).on('click', "#check_logged_in_show_form_if_true", function(){


	check_loggedin().then(display_form());

});

function check_loggedin(myurl) {


	return $.ajax({
		method: 'get',
		url: 'https://www.this-domain-will-cause-ajax-request-to-error.com',
		data: {
			foo: 1,
		},
		traditional : true, 
		beforeSend: function() {
			
		},
		success: function(data){

			console.log('logged in - ok to show form');
			return true
		},
		error: function(data){
			
			// not logged in prompt user to sign in
			console.log('ajax failed - do not show form');


			return false
		}
	});

};


function display_form() {

	$('#myform').show();

};

<div class="alert alert-success" id="myform" style="display: none;">
	
	Only show this form if ajax request is successful

	<input type="text" name="input" placeholder="" value="" class="form-control" >
	
</div>


<hr />


<span class="btn btn-primary" id="check_logged_in_show_form_if_true" >Display form if ajax request is successful (form should not show)</span>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

标签： jquerydeferred