मेरे पास एक मूल HTML फ़ाइल है जो एक जावा प्रोग्राम से जुड़ी है। जब भी पेज रिफ्रेश होता है तो यह जावा प्रोग्राम HTML फाइल के हिस्से की सामग्री को अपडेट करता है। मैं समय के प्रत्येक अंतराल के बाद केवल पृष्ठ के उस हिस्से को ताज़ा करना चाहता हूं। मैं उस हिस्से को रख सकता हूं जिसे मैं ताज़ा करना चाहूंगा div, लेकिन मुझे यकीन नहीं है कि केवल सामग्री को कैसे ताज़ा किया जाए div। किसी भी सहायता की सराहना की जाएगी। धन्यवाद।
जवाबों:
इसके लिए अजाक्स का प्रयोग करें।
एक फ़ंक्शन बनाएँ जो वर्तमान पृष्ठ को ajax के माध्यम से लाएगा, लेकिन पूरे पृष्ठ को नहीं, बस सर्वर से प्रश्न में div। डेटा फिर (jQuery के माध्यम से) प्रश्न में उसी div के अंदर डाल दिया जाएगा और पुरानी सामग्री को नए के साथ बदल देगा।
प्रासंगिक कार्य:
जैसे
$('#thisdiv').load(document.URL + ' #thisdiv');
ध्यान दें, लोड स्वचालित रूप से सामग्री को बदल देता है। आईडी चयनकर्ता से पहले एक स्थान शामिल करना सुनिश्चित करें।
$('#thisdiv').load(document.URL + ' #thisdiv>*')#thisdivमूल के अंदर एक और होने से रोकता है#thisdiv
मान लेते हैं कि आपकी html फाइल के अंदर 2 divs हैं।
<div id="div1">some text</div>
<div id="div2">some other text</div>
जावा प्रोग्राम स्वयं html फ़ाइल की सामग्री को अपडेट नहीं कर सकता क्योंकि html क्लाइंट से संबंधित है, इस बीच जावा बैक-एंड से संबंधित है।
हालाँकि, आप सर्वर (बैक-एंड) और क्लाइंट के बीच संवाद कर सकते हैं।
हम जो बात कर रहे हैं वह AJAX है, जिसे आप जावास्क्रिप्ट का उपयोग करके प्राप्त करते हैं, मैं jQuery का उपयोग करने की सलाह देता हूं जो एक सामान्य जावास्क्रिप्ट पुस्तकालय है।
मान लेते हैं कि आप पृष्ठ को प्रत्येक निरंतर अंतराल को ताज़ा करना चाहते हैं, तो आप प्रत्येक x समय में समान क्रिया को दोहराने के लिए अंतराल फ़ंक्शन का उपयोग कर सकते हैं।
setInterval(function()
{
alert("hi");
}, 30000);
आप इसे इस तरह भी कर सकते हैं:
setTimeout(foo, 30000);
जहां फू एक फंक्शन है।
अलर्ट ("हाय") के बजाय आप AJAX अनुरोध कर सकते हैं, जो सर्वर को एक अनुरोध भेजता है और कुछ जानकारी प्राप्त करता है (उदाहरण के लिए नया पाठ) जिसे आप div में लोड करने के लिए उपयोग कर सकते हैं।
एक क्लासिक AJAX इस तरह दिखता है:
var fetch = true;
var url = 'someurl.java';
$.ajax(
{
// Post the variable fetch to url.
type : 'post',
url : url,
dataType : 'json', // expected returned data format.
data :
{
'fetch' : fetch // You might want to indicate what you're requesting.
},
success : function(data)
{
// This happens AFTER the backend has returned an JSON array (or other object type)
var res1, res2;
for(var i = 0; i < data.length; i++)
{
// Parse through the JSON array which was returned.
// A proper error handling should be added here (check if
// everything went successful or not)
res1 = data[i].res1;
res2 = data[i].res2;
// Do something with the returned data
$('#div1').html(res1);
}
},
complete : function(data)
{
// do something, not critical.
}
});
Wheaea बैकएंड POST'ed डेटा प्राप्त करने में सक्षम है और उदाहरण के लिए (और बहुत ही बेहतर) JSON डेटा ऑब्जेक्ट को वापस करने में सक्षम है, वहाँ कई ट्यूटोरियल हैं कि ऐसा कैसे करना है, Google से GSON कुछ ऐसा है जो मैं कर रहा हूं। कुछ समय पहले, आप इस पर एक नज़र डाल सकते थे।
मैं जावा POST प्राप्त करने और उस प्रकार के JSON के साथ पेशेवर नहीं हूं इसलिए मैं आपको इसके साथ एक उदाहरण नहीं देने जा रहा हूं, लेकिन मुझे उम्मीद है कि यह एक अच्छी शुरुआत है।
आप jQuery के साथ उदाहरण के लिए ग्राहक पक्ष पर करने की जरूरत है।
मान लें कि आप HTML को ID के साथ पुनः प्राप्त करना चाहते हैं mydiv:
<h1>My page</h1>
<div id="mydiv">
<h2>This div is updated</h2>
</div>
आप पृष्ठ के इस भाग को jQuery के साथ इस प्रकार अद्यतन कर सकते हैं:
$.get('/api/mydiv', function(data) {
$('#mydiv').html(data);
});
सर्वर-साइड में आपको /api/mydivmydiv के अंदर जाने वाले HTML के टुकड़े को आने और वापस करने के लिए हैंडलर लागू करना होगा।
इस फिडेल को देखें मैं आपके लिए एक मज़ेदार उदाहरण के लिए jQuery का उपयोग कर JSON प्रतिक्रिया डेटा के साथ प्राप्त करता हूं: http://jsfiddle.net/t35F9/1/
का प्रयोग करें fetchऔर innerHTMLdiv सामग्री लोड करने
$.ajax(), $.get(), $.post(), $.load()jQuery के कार्य आंतरिक रूप से XML HTTPअनुरोध भेजते हैं। इनमें load()से केवल एक विशेष के लिए समर्पित है DOM Element। देखें jQuery के अजाक्स डॉक्टर । इन पर एक विवरण क्यूए यहाँ हैं ।