如何使用jQuery制作正确的Graph Api请求？

时间：2017-12-02 13:32:12

标签： jquery html css facebook-graph-api

我正在尝试使用Graph API和jQuery获取用户数据，但我得到的只是用户名和用户数据。 任何人都可以指出我的错误或我失踪的任何事情吗？ 请忽略任何愚蠢的概念错误，如果有的话，因为我是jQuery的新手。 非常感谢

＆＃13;
＆＃13; 
$(document).ready(function(){

	var myToken = "EAACEdEose0cBAK93dc4Bx3mD4pVg5U8a2SZCl9tP9UF7TsbGH1SlGcboZAZCVcCgAeA3IEsjyQ4D58xAylHhZBjA0JMV2Jl1ZAfOlQ9wZC7wS01JzlX36V7YD5b3DXkn4ObNNT1AX4bZCQyU2bERQW1DsOFE894TNfs9WDcFBtH6ISRfLuFo8PqjL0XlUSDnOMZD";

	function myInfo(){
		$.ajax("https://graph.facebook.com/me?fields=name,id,user_hometown,age,birthday&access_token="+myToken,{
			success: function(response){
				console.log(response);
				console.log(typeof(response));
				$("#name").text(response.name);
				$("#email").text(response.email);
				$("#bday").text(response.birthday);
			}
		});
	}	
	$("#click").on('click', myInfo);


	function myFeeds(){
		$.ajax("https://graph.facebook.com/me?access_token="+myToken,{
			success: function(response){
				console.log(response);
				console.log(typeof(response));
				$("#posts").text(response.posts);
			}
		});
	}
	$("#feeds").on('click', myFeeds);
});
＆＃13; 
html, body{
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
}

.container{
	width: 100%;
	height: 100%;
	margin:0;
	padding: 0;
}

.container .row1{
	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;
}

.container #row1{
	margin-top: 2%;
	font-family: Roboto, "san-serif";
	font-size: 1.3em;
}

.container #row2{
	margin-top: 5%;
	font-family: Roboto, "san-serif";
	font-size: 1.2em;
}

.container #row3{
	margin-top: 8%;
	font-family: Roboto, "san-serif";
	font-size: 1em;
}

.container #row4{
	margin-top: 10%;
	font-family: Roboto, "san-serif";
	font-size: 1.2em;
}

a{
	cursor: pointer;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Facebook Data Parser</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="jQueryApp.css">
</head>
<body>
		<div class="container">
			<div class="row" id="row1">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
					<div class="text-center">
						<span>My App</span>
					</div>
				</div>
			</div>
			<div class="row" id="row2">
				<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12">
					<div class="text-center">
						<span id="info">Hi, I am Abhinav. <a id="click">Click here to know more about me</a></span>
					</div>
				</div>
			</div>
			<div class="row" id="row3">
				<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
					<div class="text-center">
						<span>User_name: <span id="name"></span></span>
					</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
					<div class="text-center">
						<span>User_email:<span id="email"></span></span>
					</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
					<div class="text-center">
						<span>User_birthday: <span id="bday"></span></span>
					</div>
				</div>
			</div>
			<div class="row" id="row4">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
					<div class="text-center">
						<span><a id="feeds">Check my recents feeds</a></span>
					</div>
				</div>
			</div>
		</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="jQueryApp.js"></script>	
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

我想提取所有基本用户数据，如家乡，生日等。

1 个答案:

答案 0 :(得分：0)

这对我有用。我正在犯一个初学者的错误：）

主要错误是：     1.未指定div以在我的html文件中显示feed / post。     2.未正确发出所需的api请求。

＆＃13;
＆＃13; 
$(document).ready(function(){

	var myToken = "EAACEdEose0cBAMNlP2TqSZAp7GDjeXaJ5FEKQlEMAf2zxV8irKaLi1hk6rLvEVdylZCrZCSbWrFyqwelZAx3Niw1eUXS4zIZAoIeNXkebc8aXrh8zBA6LnuCBXYr1dWXYJjjI8pFb3krgRp2hcoBCPcUsArPDECSvmNYZCuUxNP3BM4SwbsAY6nTxNgZBLfdV0ZD";

	function myInfo(){
		$.ajax("https://graph.facebook.com/me?fields=email, name,birthday&access_token="+myToken,{
			success: function(response){
				console.log(response);
				console.log(typeof(response));
				$("#name").text(response.name);
				$("#email").text(response.email);
				$("#bday").text(response.birthday);
				
			}
		});
	}	
	$("#click").on('click', myInfo);

	function myFeeds(){
		$.ajax("https://graph.facebook.com/me?fields=feed&access_token="+myToken,{
			success: function(response){
				console.log(response);
				console.log(typeof(response));
				$("#post").text(response.feed.data[0].story);
			}
		});
	}
	$("#feeds").on('click', myFeeds);
});
＆＃13; 
html, body{
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
}

.container{
	width: 100%;
	height: 100%;
	margin:0;
	padding: 0;
}

.container .row1{
	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;
}

.container #row1{
	margin-top: 2%;
	font-family: Roboto, "san-serif";
	font-size: 1.3em;
}

.container #row2{
	margin-top: 5%;
	font-family: Roboto, "san-serif";
	font-size: 1.2em;
}

.container #row3{
	margin-top: 8%;
	font-family: Roboto, "san-serif";
	font-size: 1em;
}

.container #row4{
	margin-top: 10%;
	font-family: Roboto, "san-serif";
	font-size: 1.2em;
}

a{
	cursor: pointer;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Facebook Data Parser</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="jQueryApp.css">
</head>
<body>
		<div class="container">
			<div class="row" id="row1">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
					<div class="text-center">
						<span>My App</span>
					</div>
				</div>
			</div>
			<div class="row" id="row2">
				<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12">
					<div class="text-center">
						<span id="info">Hi, I am Abhinav. <a id="click">Click here to know more about me</a></span>
					</div>
				</div>
			</div>
			<div class="row" id="row3">
				<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
					<div class="text-center">
						<span>User_name: <span id="name"></span></span>
					</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
					<div class="text-center">
						<span>User_email:<span id="email"></span></span>
					</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
					<div class="text-center">
						<span>User_birthday: <span id="bday"></span></span>
					</div>
				</div>
			</div>
			<div class="row" id="row4">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
					<div class="text-center">
						<span><a id="feeds">Check my recents Post</a>
							<div id="post"></div>
						</span>
					</div>
				</div>
			</div>
		</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="jQueryApp.js"></script>	
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题