एक Drupal साइट के लिए एक सूचना विजेट बनाना

हाल ही में, मेरे सामने एक समस्या पैदा हुई - एक सेवा के लिए एक सूचना विजेट बनाने के लिए, ताकि इसे तृतीय-पक्ष साइटों पर रखा जा सके।
सेवा के बारे में संक्षेप में - साइट "हर दिन के लिए स्मार्ट शब्द" अपनी तरह का पहला शैक्षिक संसाधन है। व्यापक जनता के लिए अज्ञात शब्द हर दिन दिखाई देते हैं और RuNet में "स्मार्ट" शब्दों का सबसे बड़ा शब्दकोश बनाते हैं। हर सुबह Everydayword.ru पर आएं और अपनी शब्दावली बढ़ाएं।

विजेट बनाने से पहले, मेरे लिए यह सवाल उठा कि डेटा कैसे और किस प्रारूप में प्राप्त किया जाए। मेरी पसंद JSON के साथ संयोजन में AJAX पर गिर गई।

चलिए शुरू करते हैं

पीएचपी

सबसे पहले, आपको एक पेज बनाने की आवश्यकता है, जिसमें अजाक्स अनुरोध जाएगा। इसलिए, मॉड्यूल फ़ाइल में, हुक_मेनू घोषित करें (और वह फ़ंक्शन जिसमें हम डेटा लौटाएंगे:

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"}

जे एस

खैर, जैसे कि 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 को सक्षम कर सकते हैं, लेकिन हर कोई जो हमारे विजेट को स्थापित करना चाहता है, वह ऐसा नहीं करेगा।
हालाँकि, crossDomain विधि में crossDomain तरह एक सेटिंग है, लेकिन यह केवल 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 () के सिद्धांत का अध्ययन करने के बाद, हम अपने कोड का आधुनिकीकरण कर रहे हैं ।

अंतिम, कार्यशील संस्करण।

जे एस

  $.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) } }); }); 

पीएचपी

 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(); } 

विजेट प्लेसमेंट

एक विजेट लगाने के लिए यह आवश्यक है:

• जेएस फ़ाइल कनेक्ट करें
• वैकल्पिक रूप से कुछ तैयार शैलियों के साथ एक सीएसएस फ़ाइल शामिल करें
  उस जगह पर जहां आप विजेट प्रदर्शित करना चाहते हैं, एक विशिष्ट आईडी के साथ एक div बनाएं