ताज़ा पृष्ठ का हिस्सा (div)

Question

मेरे पास एक मूल HTML फ़ाइल है जो जावा प्रोग्राम से जुड़ी है। यह जावा प्रोग्राम जब भी पृष्ठ रीफ्रेश हो जाता है तो HTML फ़ाइल के हिस्से की सामग्री अपडेट करता है। मैं समय के प्रत्येक अंतराल के बाद पृष्ठ के केवल उस हिस्से को ताज़ा करना चाहता हूं। मैं उस हिस्से को रख सकता हूं जिसे मैं एक div में रीफ्रेश करना चाहता हूं, लेकिन मुझे यकीन नहीं है कि div की सामग्री को रीफ्रेश कैसे करें। किसी भी सहायता की सराहना की जाएगी। धन्यवाद।

Answer 1

उपयोग इस के लिए अजाक्स:

इस फिडल मैं एक मजेदार उदाहरण jQuery JSON उत्तर डेटा के साथ मिल प्रयोग करने के लिए आपके लिए बनाया देखें।

एक ऐसा फ़ंक्शन बनाएं जो वर्तमान पृष्ठ को AJAX के माध्यम से लाएगा, लेकिन पूरे पृष्ठ पर नहीं, केवल सर्वर से प्रश्न में div। डेटा तब (फिर से jQuery के माध्यम से) प्रश्न में एक ही div के अंदर रखा जाएगा और पुरानी सामग्री को नए से बदल देगा।

प्रासंगिक समारोह:

http://api.jquery.com/load/

उदा

$('#thisdiv').load(document.URL + ' #thisdiv'); 

नोट, लोड स्वचालित रूप से सामग्री को प्रतिस्थापित करता है। आईडी चयनकर्ता से पहले एक जगह शामिल करना सुनिश्चित करें।

Answer 2

आपको क्लाइंट पक्ष पर उदाहरण के लिए jQuery के साथ ऐसा करने की आवश्यकता है।

<h1>My page</h1> 
<div id="mydiv"> 
    <h2>This div is updated</h2> 
</div> 

आप jQuery के साथ पेज के इस भाग को अपडेट कर सकते इस प्रकार है::

मान लीजिए कि आप आईडी mydiv साथ div में HTML पुनः प्राप्त करना चाहते हैं

$.get('/api/mydiv', function(data) { 
    $('#mydiv').html(data); 
}); 

सर्वर साइड में आप /api/mydiv पर आने वाले अनुरोधों के लिए हैंडलर को कार्यान्वित करने की आवश्यकता है और HTML के टुकड़े को वापस लौटाएं जो mydiv के अंदर जाता है। http://jsfiddle.net/t35F9/1/

Answer 3

मान लीजिए कि आपके पास अपनी HTML फ़ाइल के अंदर 2 divs हैं।

<div id="div1">some text</div> 
<div id="div2">some other text</div> 

जावा कार्यक्रम में ही क्योंकि एचटीएमएल ग्राहक से संबंधित है html फ़ाइल की सामग्री को अद्यतन नहीं कर सकते, इस बीच जावा बैक-एंड से संबंधित है।

हालांकि, आप सर्वर (बैक एंड) और क्लाइंट के बीच संवाद कर सकते हैं।

हम जो बात कर रहे हैं वह AJAX है, जिसे आप जावास्क्रिप्ट का उपयोग करके प्राप्त करते हैं, मैं jQuery का उपयोग करने की अनुशंसा करता हूं जो एक सामान्य जावास्क्रिप्ट लाइब्रेरी है।

मान लीजिए कि आप प्रत्येक निरंतर अंतराल पृष्ठ को रीफ्रेश करना चाहते हैं, तो आप प्रत्येक एक्स समय में एक ही क्रिया को दोहराने के लिए अंतराल फ़ंक्शन का उपयोग कर सकते हैं।

setInterval(function() 
{ 
    alert("hi"); 
}, 30000); 

आप इसे इस तरह भी कर सकता है:

setTimeout(foo, 30000); 

Whereea foo एक समारोह है।

अलर्ट ("हाय") के बजाय आप 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. 
    } 
}); 

wherea बैकएंड POST'ed डेटा प्राप्त करने में सक्षम है और (और बहुत preferrable) सूचना के एक डेटा वस्तु वापस जाने के लिए, उदाहरण के लिए सक्षम है, वहाँ है JSON ऐसा करने के तरीके के साथ वहां कई ट्यूटोरियल हैं, Google से जीएसओएन कुछ ऐसा है जो मैंने थोड़ी देर पहले इस्तेमाल किया था, आप इसे देख सकते हैं।

मैं जावा पोस्ट प्राप्त करने और जेएसओएन उस तरह की वापसी के साथ पेशेवर नहीं हूं इसलिए मैं आपको इसके साथ एक उदाहरण नहीं दे रहा हूं लेकिन मुझे उम्मीद है कि यह एक सभ्य शुरुआत है।

Answer 4

$.ajax(), $.get(), $.post(), $.load() jQuery के फ़ंक्शन आंतरिक रूप से XML HTTP अनुरोध भेजते हैं। इनमें से load() केवल एक विशेष DOM Element के लिए समर्पित है। jQuery Ajax Doc देखें। एक विवरण क्यूए इन पर Here हैं।