javascript – 添加到联系人,如添加到日历按钮/ html / Ajax选项

前端之家收集整理的这篇文章主要介绍了javascript – 添加到联系人,如添加到日历按钮/ html / Ajax选项前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我想为网页开发一个“添加到联系人”按钮,就像您在网络研讨会和活动页面like this one上看到的“添加到日历 – Google,ICal,Outlook”类型按钮.

我开始调查Google通讯录,因为我使用它.
我开始构建一个表单,将应用程序/ atom xml提交到他们在the help files here中讨论的URL以及Google on Stack的类似问题.

我认为创建这是一个开源类似服务社区,一些专家帮助将不胜感激,因为我修补它.我在这里要求这个贡献.

我粗略的代码,这是行不通的






function SendToGoogle() {

var url = "https://www.google.com/m8/Feeds/contacts/default/full";
var data = contactData();

alert(data);

/*
$.post(url,data,function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
    });
*/
    $.ajax({type: "POST",url: url,dataType: "xml",contentType: "application/atom+xml",cache: false,async: true,crossDomain: true,success: function(data,status){
        alert("Data: " + data + "\nStatus: " + status)}
})


} //end SendToGoogle








function contactData() {
return '        Elizabeth     Bennet     Elizabeth Bennet    Notes          (206)555-1212        (206)555-1213          Mountain View    1600 Amphitheatre Pkwy    CA    94043    United States          1600 Amphitheatre Pkwy Mountain View    ';
} //end contactData



最佳答案
证据就在布丁中,所以在你折磨自己阅读这篇长篇文章之前:Create Contacts Test Site让它运转起来:)如果你打开了webtool的控制台,你可以看到我们找回联系人资源,而Elizabeth Bennet现在将在你的联系人中!

哦,顺便说一下,当用户谷歌会在我的小网站和你的本地版本上抱怨它不安全时,只需点击高级并继续. (谷歌会这样做,直到你提交你的OAuth,以便他们的团队对最终产品进行验证,但……)

所以在google help docs
在最顶层我们看到这个:

Note: For read and write access to users’ contacts,use the People
API,which provides both contact and profile information using JSON
instead of the older GData protocol.

所以这里看起来正确的答案似乎是转到People API.我花了一些时间研究它,并为你粗略回答.

我找到了this example页面,它可以解决你想要的大部分问题.如果您完全遵循它,您将获得一个本地版本,使用javascript连接到他们的api,这允许我们创建联系人.

我们必须在google的api中设置api应用程序,以基本上验证此过程.

一旦我们这样做,我们可以设置请求用户接受身份验证的按钮(允许我们为他们创建联系人).

有趣的是改变他们的代码,它只是为页面上的用户提供前十个用户来创建联系人.

在得到用户的许可之后,似乎有可能通过常规的http请求直接进行,但我发现使用他们的crazy api setup更快.

我们需要知道如何设置gapi.client.people.people.createContact api调用,它需要一个Person resource.该资源很方便点击,看看我们如何设置人员资源类别.

Here是我们在尝试将它放在我们的网页上之前可以使用api的地方.在右侧面板中有一个标题

Try this API

在它旁边有一个小盒子,扩大了区域,所以我们可以更容易地玩api.右上角有一个JavaScript选项,试图查看我们正在执行的请求的JavaScript等价物.

在左侧,我们有请求体,它允许我们将详细信息放入createContacts api请求中.所以如果你输入你的例子:

    {
      "names": [
          {
            "givenName": "Elizabeth","familyName": "Bennet"
          }
        ],"phoneNumbers": [
          {
            "type": "home","value": "(206)555-1212"
          },{
            "type": "cell","value": "(206)555-1213"
          }
        ],"addresses": [
          {
            "type": "home","streetAddress": "1600 Amphitheatre Pkwy","postalCode": "94043","country": "United States","city": "Mountain View","region": "California"
          }
        ]
    }

在左侧框中,您可以看到它将其输入到右侧的javascript createContacts请求中.

既然代码并不完美,我们希望保持自己和用户的身份验证,那么我们将挑选出两个主要内容

> createContacts代码
> .signIn中的网址({scope:“https://www.googleapis.com/auth/contacts”})

该范围基本上告诉api我们想要为用户访问什么.

所以现在把它们放在一起:

Meta charset="utf-8" />
  required by the API; multiple scopes can be
      // included,separated by spaces.
      var SCOPES = "https://www.googleapis.com/auth/contacts";

      var authorizeButton = document.getElementById('authorize_button');
      var signoutButton = document.getElementById('signout_button');
      var contactButton = document.getElementById('contact_button');

      /**
       *  On load,called to load the auth2 library and API client library.
       */
      function handleClientLoad() {
        gapi.load('client:auth2',initClient);
      }

      /**
       *  Initializes the API client library and sets up sign-in state
       *  listeners.
       */
      function initClient() {
        gapi.client.init({
          apiKey: API_KEY,clientId: CLIENT_ID,discoveryDocs: DISCOVERY_DOCS,scope: SCOPES
        }).then(function () {
          // Listen for sign-in state changes.
          gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

          // Handle the initial sign-in state.
          updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
          authorizeButton.onclick = handleAuthClick;
          signoutButton.onclick = handleSignoutClick;
          contactButton.onclick = handleContactClick;
        },function(error) {
          appendPre(JSON.stringify(error,null,2));
        });
      }

      /**
       *  Called when the signed in status changes,to update the UI
       *  appropriately. After a sign-in,the API is called.
       */
      function updateSigninStatus(isSignedIn) {
        if (isSignedIn) {
          authorizeButton.style.display = 'none';
          signoutButton.style.display = 'block';
          contactButton.style.display = 'block';
        } else {
          authorizeButton.style.display = 'block';
          signoutButton.style.display = 'none';
        }
      }

      /**
       *  Sign in the user upon button click.
       */
      function handleAuthClick(event) {
        gapi.auth2.getAuthInstance().signIn();
      }

      /**
       *  Sign out the user upon button click.
       */
      function handleSignoutClick(event) {
        gapi.auth2.getAuthInstance().signOut();
      }

      /**
       *  Create a contact upon button click.
       */
      function handleContactClick() {
        gapi.client.people.people.createContact({
          "resource": {
            "names": [
              {
                "givenName": "Elizabeth","familyName": "Bennet"
              }
            ],"phoneNumbers": [
              {
                "type": "home","value": "(206)555-1212"
             .signIn({scope: "https://www.googleapis.com/auth/contacts"}) },{
                "type": "cell","value": "(206)555-1213"
              }
            ],"addresses": [
              {
                "type": "home","region": "California"
              }
            ]
          }
        }).then(function(response) {
                // Handle the results here (response.result has the parsed body).
                console.log("Response",response);
              },function(err) { console.error("Execute error",err); });
      }

      /**
       * Append a pre element to the body containing the given message
       * as its text node. Used to display the results of the API call.
       *
       * @param {string} message Text to be placed in pre element.
       */
      function appendPre(message) {
        var pre = document.getElementById('content');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
      }
    

顶部的客户端和api变量是您在快速入门页面上完成步骤后放入密钥的位置.

显然,按钮和工作方式可以改变,但这只是为了证明它有效:P

这是我的github:GitHub你只需要注意index.html PHP就这样我就可以把小测试网站给你看.

谷歌API再次罢工!

希望这有帮助,如果还有别的什么就打我!

猜你在找的Ajax相关文章