简体   繁体   English

使用JQUERY Ajax将JavaScript值传递给PHP(值来自Facebook Javascript SDK)

[英]Pass JavaScript value to PHP using JQUERY Ajax (Values are from Facebook Javascript SDK)

First of all, I would like to thank you for the time you spend to read my post. 首先,感谢您花时间阅读我的文章。

I am trying to add Facebook Javascript SDK to a web page and when user logged in, the user data will be saved into mysql using php. 我试图将Facebook Javascript SDK添加到网页,并且当用户登录时,用户数据将使用php保存到mysql中。

I almost can kind of figure it out how to insert PHP variable data in MYSQL but as this is first time I'm using Javascript language then I am total new :( 我几乎可以弄清楚如何在MYSQL中插入PHP变量数据,但是因为这是我第一次使用Javascript语言,所以我完全是新手:(

To make the story short what I am really looking forward is that someone kindly show me in a simple webpage following things: 简而言之,我真正期待的是有人在一个简单的网页上向我展示以下内容:

1- Webpage starts and checks if the user had been logged into Facebook and also if the user logged into the app (gave permission to the app to have access to the user basic profile info and Email) 1-网页启动并检查用户是否已登录Facebook以及用户是否已登录应用程序(授予该应用程序访问用户基本个人资料和电子邮件的权限)

2- If the user is not logged into Facebook user will be redirected to the Facebook login page or if user did not give permission to the App yet, it is asking for the necessary permissions. 2-如果用户未登录Facebook,则用户将被重定向到Facebook登录页面,或者如果用户尚未授予该应用程序许可,则要求提供必要的许可。

3- If the user passed the first two stages(user successfully connected), the page will display the following message " Hello dear $User_Facebook_Name ". 3-如果用户通过了前两个阶段(用户成功连接),页面将显示以下消息“ Hello dear $ User_Facebook_Name ”。

$User_Facebook_Name is a PHP Variable passed by Javascript from Facebook Javascript SDK $ User_Facebook_Name是Javascript从Facebook Javascript SDK传递的PHP变量

I would like not to use Submit button to pass the Javascript variables to PHP (The website page doesn't refresh). 我不希望使用Submit按钮将Javascript变量传递给PHP(网站页面不会刷新)。

I prefer to use Facebook Javascript SDK, PHP, Jquery(Ajax) for this issue. 我更喜欢使用Facebook Javascript SDK,PHP,Jquery(Ajax)解决此问题。

So far I have the following codes and the page displays the message but using Facebook Javascript SDK like this : 到目前为止,我具有以下代码,并且该页面显示了消息,但使用的是Facebook Javascript SDK,如下所示:

FB.api(uid, function(info) { FB.api(uid,function(info){

$('#welcome').html("Hello dear " + info.name ); $('#welcome')。html(“ Hello dear” + info.name);

index.php index.php

 <html> <head> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/myscript.js"></script> </head> <body> <div id="fb-root"></div> Hello dear <?php> echo "$user_Facebook_Name"; ?> </body> </html> 

myscript.js myscript.js

  window.fbAsyncInit = function() { FB.init({ appId : 'App_ID', xfbml : true, version : 'v2.1' }); //Next, find out if the user is logged in FB.getLoginStatus(function(response) { if (response.status === 'connected') { // the user is logged in and has authenticated your var uid = response.authResponse.userID; var accessToken = response.authResponse.accessToken; FB.api(uid, function(info) { $('#welcome').html("Hello dear " + info.name ); }); } else if (response.status === 'not_authorized') { // the user is logged into Facebook, // but has not authenticated your app var oauth_url = 'https://www.facebook.com/dialog/oauth/'; oauth_url += '?client_id=App_ID'; //Your Client ID oauth_url += '&redirect_uri=' + 'http://website.com/'; //Send them here if they're not logged in oauth_url += '&scope=email,user_friends'; window.top.location = oauth_url; } else { // the user isn't logged in to Facebook. } //Response.status }); // Get login status }; //FB Async // Load the JavaScript SDK Asynchronously (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); 

Any help would be really appreciated and would like to thank you in advance. 任何帮助将不胜感激,并在此先感谢您。

I'm not 100% sure I understand your question, but what it seems like you're saying is that once you get the the point where you want to submit something back to the server (PHP code), you want to do it asynchronously via jQuery's $.ajax() method? 我不是100%确信我理解您的问题,但是您似乎想说的是,一旦您知道要向服务器提交某些内容(PHP代码),便要异步进行。通过jQuery的$ .ajax()方法? If so, you can still use a submit button without refreshing the page. 如果是这样,您仍然可以使用提交按钮而不刷新页面。 Just wire up an event listener to the button to make an AJAX request when it is clicked 只需将事件监听器连接到该按钮,即可在单击该按钮时发出AJAX请求

HTML: HTML:

<form id="theForm">
    <input type="text" id="textBox" name="textBox" value="textBox" />
    <input type="text" id="userName" name="userName" value="userName" />
    <input type="button" id="submitBtn" value="Submit" />
</form>

JS: JS:

$('#submitBtn').on('click', function() {
    var formData = $('#theForm').serialize();
    $.ajax({
        url: 'something.php',
        data: formData,
        success: function (data) {},
        error: function() {}
    })
});

Even better, if you want your data serialized into an array of objects rather than a query string, you can use .serializeArray() instead. 更好的是,如果希望将数据序列化为对象数组而不是查询字符串,则可以使用.serializeArray() But PHP should be able to read all the values from the query string as long as you have names associated with your form elements. 但是,只要您具有与表单元素相关联的名称,PHP就应该能够从查询字符串中读取所有值。 Then whatever you send back from PHP will be contained in the data variable of your success function. 然后,从PHP发送回来的任何内容都将包含在成功函数的data变量中。 And this will all execute without a page refresh. 这将全部执行而无需刷新页面。

If you don't want to use a button at all, I supposed you could use setTimeout() so it would just send an AJAX request every X milliseconds or somehow check if changes are made on your page, but that could get pretty complicated. 如果您根本不想使用按钮,那么我想您可以使用setTimeout(),这样它只会每X毫秒发送一个AJAX请求,或者以某种方式检查是否在页面上进行了更改,但这可能会变得非常复杂。 I would say keep it simple at this point. 我想说的很简单。

EDIT : After getting more information from your comment, the answer is even simpler than above. 编辑 :从您的评论中获取更多信息后,答案甚至比上面更简单。 Still, all you're doing is making an AJAX request inside your FB.api() function: 尽管如此,您要做的就是在FB.api()函数中发出AJAX请求:

FB.api(uid, function(info) {    
    $('#welcome').html("Hello dear " + info.name );    
    $.ajax({
        url: 'something.php',
        data: info,
        success: ... ,
        error: ...
    });
});

From there, you just grab the variable from the form variable in PHP. 从那里,您只需从PHP的form变量中获取变量。 My PHP is a little rusty, but I believe it would be something like $_POST["info"] . 我的PHP有点生锈,但是我相信它会像$_POST["info"] Trying to redisplay it without refreshing the page is completely pointless because you already have the variable in the page. 尝试在不刷新页面的情况下重新显示它是完全没有意义的,因为页面中已经有变量。 The only point of sending the username off to the server is to save it in the database. 将用户名发送到服务器的唯一目的是将其保存在数据库中。 You've already displayed it on the page through the API. 您已经通过API在页面上显示了它。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM