Clever Geek Handbook

Drupalサイトの情報ウィジェットを作成する

最近、あるサービスの情報ウィジェットを作成し、サードパーティのサイトに配置できるようにするというタスクが私の目の前で発生しました。

サービスについて簡単に-サイト「毎日のためのスマートな言葉」は、その種の最初の教育リソースです。 広大な大衆には知られていない単語が毎日登場し、RuNetの「スマート」単語の最大の辞書を構成しています。 毎朝、 Everydayword.ruにアクセスして、語彙を増やしてください。



ウィジェットを作成する前に、データをどのように受け取るのか、どのような形式であるのかという疑問が生じました。 私の選択は、 JSONと組み合わせたAJAXでした。



さあ始めましょう



Php


まず、ajaxリクエストが送信されるページを作成する必要があります。 したがって、モジュールファイルで、hook_menu（）とデータを返す関数を宣言します。 

function mymodule_menu() { $items['output'] = array( 'page callback' => 'mymodule_output', //    'access arguments' => array('access content'), ); return $items; } function mymodule_output() { $data = array( 'title' => t('Your title'), 'body' => t('Your body'), ); drupal_json_output($data); }


Drushツール「 Drush cc all



」を使用してキャッシュをクリアし、 yoursite.ru / outputページに移動します

ここにそのようなテキストが表示され、 {"title":"Your title","body":"Your body"}







Js


まあ、jsonが形成されて特定のURLに与えられるように、すべてがうまくいきます。jsも書き始めることができます。 

 $(document).ready(function () { $.ajax({ url: 'http://yoursite.ru/output', dataType: "json", success: function(data) { console.log(data) } }); });




解析エラーと一時的な修正



残念ながら、コンソールのデータの代わりに、このエラーが待っています。

XMLHttpRequest cannot load yoursite.ru/output. Origin your-test-site.ru is not allowed by Access-Control-Allow-Origin.





もちろん、yoursite.ruドメインでajaxを有効にすることはできますが、ウィジェットをインストールしたい人は誰もこれを行いません。

ただし、.ajaxメソッドにはcrossDomainのような設定がありますが、 jsonp (dataType: 'jsonp')



データjsonp (dataType: 'jsonp')



でのみ機能します

スクリプトをアップグレードします。 

 $(document).ready(function() { $.ajax({ url: 'http://yoursite.ru/output', crossDomain: true, dataType: 'jsonp', success: function(data) { console.log(data) } }); });


これで終わりではなく、新しいエラーが発生します。

Uncaught SyntaxError: Unexpected token :





ブラウザーがページをJSとして接続し、それを実行しようとすることがわかります。 jQuery.ajax（）の理論を静かに研究したので 、コードを近代化しています。



最終的な作業バージョン。



Js 


  $.ajax({ url: 'http://yoursite.ru/output?callback=?', crossDomain: true, dataType: 'jsonp', success: function(data) { var code = '<div class="widget-title">' + data.title + '</div>' code += '<div class="widget-body">"' + data.body + '"</div>' $('#widget-content').html(code) } }); });


Php 


 function mymodule_output() { drupal_add_http_header('Content-Type', 'application/x-javascript'); $data = array( 'title' => t('Your title'), 'body' => t('Your body'), ); $json = drupal_json_encode($data); echo $_GET['callback'] . "($json);"; drupal_exit(); }


ウィジェットの配置



ウィジェットを配置するには、次が必要です。



More articles:


All Articles