रेल पर रूबी के साथ AJAX का उपयोग कैसे करें

आइए समझते हैं कि AJAX क्यों मौजूद है, ताकि आप अपने रेल प्रोजेक्ट्स में इसका उपयोग करने का बेहतर विचार प्राप्त कर सकें।

जब आप किसी वेबसाइट पर जाते हैं, तो क्या होता है?

सर्वर से एक पेज लोड होता है। लेकिन अगर आप नई जानकारी देखना चाहते हैं तो आपको या तो इसे अपडेट करने के लिए पेज को फिर से लोड करना होगा, या किसी दूसरे पेज पर जाने के लिए लिंक पर क्लिक करना होगा।

यह एक तुल्यकालिक प्रवाह . है ।

नया डेटा केवल तभी प्रस्तुत किया जाता है जब सर्वर से एक नए पृष्ठ का अनुरोध किया जाता है।

लेकिन…

क्या होगा यदि आप इस पृष्ठ को पुनः लोड नहीं करना चाहते हैं?

क्या होगा यदि आप बैकएंड से डेटा लाना . चाहते हैं , किसी भी समय आप चाहें, ताकि आप वर्तमान पृष्ठ के किसी भी भाग को अपडेट कर सकें?

यहीं पर AJAX आता है।

AJAX का अर्थ है अतुल्यकालिक Javascript और XML ।

यह एक ऐसी तकनीक है जो आपके वेब ढांचे से स्वतंत्र है, लेकिन रेल के पास इसके लिए विशेष रूप से अच्छा समर्थन है जैसा कि आप इस लेख में जानेंगे।

ध्यान रखें कि आपके ऐप में AJAX जोड़ने से यह और अधिक जटिल हो जाता है।

प्रत्यक्ष AJAX अनुरोध

AJAX के दो भाग हैं, अनुरोध, जिसे आप जावास्क्रिप्ट का उपयोग करके ब्राउज़र से करते हैं, और प्रतिक्रिया, जिसे आप अपने रूबी ऐप से संभालते हैं।

आप AJAX अनुरोध कर सकते हैं सादे जावास्क्रिप्ट के साथ।

लेकिन क्योंकि इसके लिए बहुत सारे बॉयलरप्लेट कोड की आवश्यकता होती है, हम आमतौर पर इसे jQuery जैसी जावास्क्रिप्ट लाइब्रेरी के माध्यम से करते हैं।

यहां बताया गया है कि jQuery अनुरोध कैसा दिखता है :

$.get( "/vegetables", function(data) {
  alert("Vegetables are good for you!");
});

हालांकि, चूंकि रेल 5.1 डिफ़ॉल्ट रूप से jQuery उपलब्ध नहीं है (लेकिन आप इसे वापस जोड़ सकते हैं)।

नोट :आपको एक InvalidAuthenticityToken मिलेगा जब आप jQuery POST अनुरोध करते हैं तो त्रुटि होती है, इसका मतलब है कि आपको csrf-token सबमिट करने की आवश्यकता है सुरक्षा उपाय के रूप में वर्तमान पृष्ठ से। Rails.ajax Using का उपयोग करना यह आपके लिए स्वचालित रूप से करता है।

एक समाधान है!

रेल में अपना स्वयं का AJAX फ़ंक्शन शामिल है :

Rails.ajax({
  url: "/books",
  type: "get",
  data: "",
  success: function(data) {},
  error: function(data) {}
})

याद रखें, यह अभी भी ब्राउज़र से, चीजों के अनुरोध पक्ष से है।

मतलब कि यह Javascript कोड है ।

रेल में, यह AJAX कार्यक्षमता "अविभाज्य जावास्क्रिप्ट" या संक्षेप में "UJS" नामक किसी चीज़ द्वारा प्रदान की जाती है।

AJAX के साथ आंशिक अपडेट करना

अगर आप अपने पेज के केवल एक हिस्से को AJAX से प्राप्त डेटा के साथ अपडेट करना चाहते हैं, तो आपके पास ज्यादातर दो विकल्प हैं।

1. आप एक Javascript + ERB दृश्य लिख सकते हैं, जो तत्व को अपडेट करता है
2. आप एक स्ट्रिंग के रूप में नए HTML के साथ अपने नियंत्रक से JSON प्रतिक्रिया वापस कर सकते हैं, फिर तत्व को अपडेट करने के लिए जावास्क्रिप्ट का उपयोग करें

एक तीसरा विकल्प भी है।

इसमें केवल JSON के रूप में डेटा लौटाना शामिल है , फिर उस डेटा का उपयोग करके जावास्क्रिप्ट के साथ HTML तत्वों को उत्पन्न करना।

यहीं पर रिएक्ट जैसे JS फ्रेमवर्क आते हैं।

मेरी राय में, वे बहुत अधिक अनावश्यक जटिलता जोड़ते हैं ।

लेकिन हम इसे सादे Javascript से संभाल सकते हैं!

वह विकल्प 1 और 2 है।

आइए अभी के लिए उन्हीं के साथ रहें 🙂

जावास्क्रिप्ट दृश्य उदाहरण :

Rails.$('.random-number')[0].innerHTML = ("<%= j (render partial: 'random') %>")

j escape_javascript . के लिए एक उपनाम है

jQuery उदाहरण :

$('.random-number').html("<%= j (render partial: 'random') %>")

दोनों html &innerHTML लक्ष्य तत्व की सामग्री को बदलें।

आप पूरी चीज़ को बदलने के बजाय सूची में एक नया तत्व (jQuery) भी जोड़ सकते हैं।

इस कोड को .js.erb . के एक्सटेंशन वाली फ़ाइल में रखें , वर्तमान क्रिया के नाम के साथ (जैसे create.js.erb ) और दृश्य फ़ोल्डर के अंदर।

नियंत्रक पर आप इस दृश्य को किसी अन्य दृश्य की तरह ही प्रस्तुत कर सकते हैं।

अब :

जब आप AJAX कॉल करते हैं, तो यह Javascript कोड स्वचालित रूप से चलेगा और HTML को अपडेट करेगा।

आइए दूसरे विकल्प पर एक नजर डालते हैं।

यह रहा नियंत्रक कोड :

render json: { html: render_to_string(partial: 'random') }

फिर अपने Javascript कोड से :

Rails.ajax({
  url: "/books",
  type: "get",
  success: function(data) { Rails.$(".random-number")[0].innerHTML = data.html; }
})

ऐसा करने का यह एक और तरीका है!

आपको क्या उपयोग करना चाहिए?

डीएचएच का पसंदीदा पहला तरीका है, जिसे वह "एसजेआर" (सर्वर-जनरेटेड जावास्क्रिप्ट) कहते हैं।

मुझे लगता है कि रेल आपको ऐसा करना चाहता है, लेकिन दोनों को आज़माने के लिए स्वतंत्र महसूस करें (SJR &render_to_string ) स्वयं देखें और देखें कि कौन सा आपके लिए सबसे अच्छा काम करता है।

अपने JS व्यू के लिए HAML का उपयोग कैसे करें

ठीक है।

मान लें कि आप एक HAML उपयोगकर्ता हैं।

क्या इस SJR का उपयोग करना संभव है? तकनीक और रेंडर .js.haml दृश्य?

हाँ!

यहां एक उदाहरण दिया गया है :

- content = j (render partial: "random")

Rails.$('.random-number')[0].innerHTML = ("#{content}")

यह ईआरबी संस्करण की तुलना में थोड़ा बदसूरत है, लेकिन यह काम करता है।

पेज को रीफ्रेश किए बिना रेल फॉर्म कैसे जमा करें

अगर आप AJAX का उपयोग करके एक फॉर्म जमा करना चाहते हैं तो आप AJAX अनुरोध लिखे बिना ऐसा कर सकते हैं।

रेल आपके लिए इसे संभाल सकती है।

कैसे?

remote: true का उपयोग करें form_for . के साथ विकल्प ।

यहां एक उदाहरण दिया गया है :

<%= form_for @fruit, remote: true do |f| %>
  <%= f.label :name, 'Fruit' %>
  <%= f.text_field :name %>

  <%= f.submit 'Create' %>
<% end %>

अब जब आप “बनाएँ” पर क्लिक करेंगे तो रेल आपके लिए एक AJAX अनुरोध भेजेगी और पृष्ठ पुनः लोड नहीं होगा।

यदि आप सत्यापन त्रुटियां प्रदर्शित करना चाहते हैं आपको एक Javascript दृश्य बनाना और प्रस्तुत करना होगा (.js.erb file) जो वर्तमान त्रुटियों को नई त्रुटियों से बदल देता है।

"AJAX के साथ आंशिक अद्यतन करना" में उदाहरण की तरह।

बीटीडब्ल्यू, यह remote विकल्प का उपयोग लिंक के साथ भी किया जा सकता है, ताकि आप AJAX delete . कर सकें अनुरोध।

उदाहरण :

<%= link_to "Delete", book_path(book), { method: "delete", remote: true, data: { confirm: "Are you sure?" } }

आप जावास्क्रिप्ट दृश्य का उपयोग करके प्रतिक्रिया को संभाल सकते हैं।

यदि आप HTML अनुरोधों (पृष्ठ पुनः लोड से आने वाले) और AJAX अनुरोध दोनों को संभालना चाहते हैं, तो आपको respond_to जैसी किसी चीज़ का उपयोग करना होगा विधि।

उदाहरण :

respond_to do |f|
  f.html { redirect_to :index }
  f.js
end

इस उदाहरण में Turbolinks को इसे संभालने देना आसान हो सकता है।

आप अभी भी AJAX अनुरोध और redirect_to . कर सकते हैं नियंत्रक से (बिना respond_to ), फिर Turbolinks पृष्ठ की सामग्री को पुनः लोड किए बिना बदल देगा।

AJAX काम नहीं कर रहा है? यहाँ कुछ सुझाव दिए गए हैं

अगर आपका AJAX अनुरोध काम नहीं कर रहा है तो आपको कुछ डिबगिंग करनी है।

सबसे पहले, अपने ब्राउज़र डेवलपर टूल खोलें।

आप किसी भी Javascript त्रुटि के लिए कंसोल पैनल को देखना चाहते हैं ।

उन्हें ठीक करें।

साथ ही, सुनिश्चित करें कि आप जिस CSS चयनकर्ता को लक्षित कर रहे हैं वह सही है और आपके पास कोई टाइपो नहीं है।

फिर, अपने रेल लॉग की जांच करें किसी भी त्रुटि के लिए।

फिर, सुनिश्चित करें कि सही दृश्य प्रस्तुत किया जा रहा है।

यदि आप इस प्रक्रिया का पालन करते हैं तो आपको यह पता लगाने में सक्षम होना चाहिए कि आपका AJAX अनुरोध क्यों काम नहीं कर रहा है और इसे ठीक करें।

सारांश

आपने AJAX के बारे में सीखा, एक वेब विकास तकनीक जो आपको अतुल्यकालिक अनुरोध करने की अनुमति देती है!

आपने यह भी सीखा कि इसे रेल में कैसे कार्यान्वित किया जाता है। याद रखें कि AJAX को आपके नियमित (गैर-जेएस फ्रेमवर्क) रेल ऐप को काम करने के लिए आवश्यक नहीं है , लेकिन यह कुछ ऐसा है जो आपके टूलबॉक्स में उपयोगी है।

इस लेख को साझा करना न भूलें ताकि अधिक से अधिक लोग इसका लाभ उठा सकें 🙂

पढ़ने के लिए धन्यवाद!