2010-03-08 30 views
17

के साथ पेज फ्रेमेन्ट लोड करना मैं पृष्ठ का अनुरोध करने के लिए $ .ajax() का उपयोग करना चाहता हूं, लेकिन उस पृष्ठ के केवल टुकड़े लोड करें। मुझे पता है कि आप निर्दिष्ट कर सकते हैं कि आप कौन से पेज टुकड़े चाहते हैं .load() लेकिन मैं सोच रहा था कि यह $ .ajax के साथ संभव है या नहीं?Jquery AJAX

+0

संभावित डुप्लिकेट https://stackoverflow.com/questions/2137811/extract-part-of-html- दस्तावेज़-इन-jquery) –

उत्तर

2

आप पोस्ट के माध्यम से अपना टुकड़ा प्राप्त कर सकते हैं, एचटीएमएल को डिस्प्ले के साथ एक div में जोड़ सकते हैं: none; फिर चयनकर्ता का उपयोग उस टुकड़े को पाने के लिए करें जिसे आप चाहते हैं और उसे उस क्षेत्र में संलग्न करें जिसे आप प्रदर्शित करना चाहते हैं।

एयर कोड:

<div id="tempRegion" style="display:none;"> 

</div> 

$.ajax({ 
    url: "page.htm", 
    type: "GET", 
    success: function(results){ 

     $('#tempRegion').html(results); 

     ... 

     // Now select fragment, append to display area 
     var fragement = $('#someFragment').html(); 

     $('#displayRegion').html(fragement); 

    }) 

}); 
32

आप में से जो लोग सोच रहे हैं के लिए, stoplion इस सुविधा के लिए बात कर रहा है: Loading Page Fragments (पेज पर नीचे स्क्रॉल करें):

.load() विधि , $ .get() के विपरीत, हमें सम्मिलित करने के लिए दूरस्थ दस्तावेज़ का एक हिस्सा निर्दिष्ट करने की अनुमति देता है। यह यूआरएल पैरामीटर के लिए एक विशेष वाक्यविन्यास के साथ हासिल किया जाता है। यदि स्ट्रिंग में एक या अधिक स्पेस वर्ण शामिल हैं, तो पहले स्थान के बाद स्ट्रिंग का हिस्सा एक jQuery चयनकर्ता माना जाता है जो सामग्री को लोड करने के लिए निर्धारित करता है।

$ .get() से इसका समर्थन करने के लिए प्रतीत नहीं होता है, मुझे लगता है कि $ .ajax या तो नहीं होगा। इस लागू करने के लिए एक आसान तरीका निम्न होगा:

$.ajax({ 
    url: 'http://example.com/page.html', 
    data: {}, 
    success: function (data) { 
     $("#el").html($(data).find("#selector")); 
    }, 
    dataType: 'html' 
}); 

यह

$("#el").load('http://example.com/page.html #selector'); 

हालांकि के बराबर होगा, ध्यान दें कि विशेष सिंटेक्स ('#selector') का अर्थ है कि में मौजूद लिपियों लोड किया गया HTML निष्पादित नहीं किया जाएगा। .load() दस्तावेज़ों में Script Execution देखें।

+0

धन्यवाद। उसने ऐसा किया – user288423

+3

+1 - अच्छा! इसे सब एक बयान में प्राप्त करें। –

+1

नहीं, वे वही नहीं हैं। '.axax() 'काम नहीं करेगा यदि' # चयनकर्ता शीर्ष स्तर पर है। –

-3

लोड विधि के साथ आसान उपाय:

$("#menu a").click(function(){ 
    event.preventDefault(); 
    $("#container").load(this.href + " #container p"); 
    return false; 
}); 

केवल ऐसी पोस्टिंग या एक PHP स्क्रिप्ट या JSON फ़ाइल से हो रही अन्यथा यह अपनी वेबसाइट धीमी हो जाएगी रूप में और अधिक जटिल स्क्रिप्ट अजाक्स विधि का उपयोग करें।

+1

ओपी पहले से ही जानता है कि यह '.load()' के साथ काम करता है, और स्पष्ट रूप से इसे '.ajax()' के साथ करने की आवश्यकता है, अन्यथा वह नहीं पूछा होता। आपका उत्तर प्रश्न को संबोधित नहीं करता है, और आपके लिंक स्पैमयुक्त हैं, क्योंकि वे इस विषय के बारे में नहीं हैं, या तो। –

1

आप के लिए सही जवाब है:

$.ajax({ 
    url: 'http://example.com/page.html', 
    data: {}, 
    success: function (data) { 
    $("#el").html($(data).append(data).find("#selector")); 
    }, 
    dataType: 'html' 
}); 
[HTML दस्तावेज़ के निकालें हिस्सा jQuery में] (की