$() लोड पेज() पूरे पृष्ठ को लोड करने के बजाय, लेकिन सभी पृष्ठों पर मेनू रखने की आवश्यकता है

Question

मैं अपनी वेबसाइट के सामग्री क्षेत्र पर jQuery/AJAX $().load() फ़ंक्शन के साथ पुनः लोड करना चाहता हूं। लेकिन मेरी समस्या यह है कि header और footer सभी प्रविष्टियों पर प्रदर्शित होने की आवश्यकता है चाहे आपका एंट्री यूआरएल चाहे।

मेरी साइट टेम्पलेट का उपयोग कर निर्माण कर रही है, इसलिए मेरा पहला विचार अद्वितीय सामग्री के ऊपर और नीचे लेआउट के आउटपुट को हटाना था, क्योंकि मैं यानी रोकता था। मेनू दो बार प्रदर्शित होने से। लेकिन मुझे एहसास हुआ कि यदि उपयोगकर्ता पहले पृष्ठ के माध्यम से मेरी साइट में प्रवेश नहीं कर रहा है, तो index.php कहें, वह कभी भी हेडर या पाद लेख को एक अनस्टाइल टेक्स्ट पेज नहीं देख पाएगा।

मेरा सवाल है, आप इस मुद्दे के आसपास कैसे काम करेंगे? जावास्क्रिप्ट (+ jQuery) और एचटीएमएल 5 की अनुमति है।

Answer 1

page.php:

<div id="header"></di> 
<div id="mainContent"></div> 
<div id="footer"></div> 

js:

$("#content").load("page.php #mainContent"); //that will only load mainContent 

या:

$.get('page.php', function (data) { 
    data = $(data).find('#mainContent').html(); 
    $("#content").empty().append(data); 
}); 

अधिक जानकारी के लिए load() and page fragments

Answer 2

पर jQuery दस्तावेज में खंड देखें टी जिस तकनीक को आप ढूंढ रहे हैं उसे हिजाक्स के नाम से जाना जाता है, जहां आप AJAX अनुरोध से प्रतिक्रिया को रोकते हैं और केवल उस DOM का हिस्सा निकालते हैं जिसे आप प्रस्तुत पृष्ठ पर प्रतिस्थापित करना चाहते हैं।

सामान्य विचार यह है कि वास्तविक यूआरएल स्वयं भी पूर्ण पृष्ठ सामग्री वापस कर देगा, इसलिए अगर अनुरोध नए आगंतुक से आ रहा है, तो पूरा डोम लोड हो जाएगा, लेकिन यदि अनुरोध उपयोगकर्ता से अपहरण पर क्लिक कर रहा है निर्दिष्ट एक सीएसएस चयनकर्ता के साथ अपने पृष्ठ पर लिंक, तो चयनकर्ता द्वारा पहचाने गए पृष्ठ का केवल एक हिस्सा बदल दिया गया है।

Hijax - jQuery Plugin पर एक नज़र डालें। वास्तविक साइट स्वयं प्लग-इन का उपयोग करके बनाई गई है, और यदि आप अपना नेटवर्क टैब देखते हैं और अपने क्रोम या फ़ायरबग टूल में इंस्पेक्टर को देखते हैं, तो आप देख सकते हैं कि मेनू मेनू, हेडर या अन्य तत्वों को बदले बिना सामग्री को बदल दिया गया है प्रतिस्थापित नहीं किया जा रहा है।

Answer 3

ऐसा लगता है कि आपके पास कुछ अलग-अलग विकल्प हो सकते हैं। यदि कोई उपयोगकर्ता आपकी साइट पर जा रहा है लेकिन पहले पृष्ठ पर नहीं जा रहा है, तो आप यह सत्यापित करने के लिए जांच सकते हैं कि पेज लोड होने के बाद हेडर और पाद लेख दिखाए जा रहे हैं। यदि वे नहीं मिलते हैं, तो प्रारंभिक साइट लेआउट बनाया जाना चाहिए। तुम भी पहले पृष्ठ (index.php) इस तरह का निर्माण करने का फैसला कर सकता है ताकि हर पेज उसी तरह

हैंडल किया जाएगा

$(document).ready(function() { 
    // If an element of id "header" isn't found in the DOM 
    if (!$("#header").length() > 0) { 
     // Generate the header and insert it as the first element of the DOM 
    } 
    if (!$("#footer").length() > 0) { 
     // Generate the footer and append it to the last element of the DOM 
    } 
}); 

कोई संदेह नहीं है अन्य समाधान है कि आप के रूप में अच्छी मनोरंजन कर सकता है; आप शायद प्रत्येक पृष्ठ पर एक शामिल हो सकते हैं जो केवल AJAX अनुरोध के बजाय GET के माध्यम से अनुरोध किए जाने पर ही शामिल हो जाता है।