jQuery - Creating a dynamic content loader using $.get()
(hello dr.Nick) :) So I posted a question yesterday about a content loader plugin for jQuery I thought I'd use, but didn't get it to work.
jQuery - Could use a little help with a content loader
Although it works now, I see some disadvantages to it. It requires heaploads of files where the content is in. Since the code essentially picks up the url in the href link and searches that file for a div called #content
Nick Craver thought I should use $.get()instead sinc开发者_如何学Ce it's got a descent callback. But I'm not that strong in js at all.. And I don't even know what this means. I'm basically used to Visual Basic and passing of arguments, storing in txt files etc. Which is really not suitable for this purpose.
So what's the "normal" way of doing things like this? I'm pretty sure I'm not the only one who's thought of this right? I basically want to get content from a single php file that contains alot of divs with unique IDs. And without much hassle, fade out the existing content in my main page, pick up the contents from the other file and fade it into my main page.
Try this little self-contained example
<?php
if ( isset($_POST['contentId']) ) {
// a contentId parameter has been sent
// "we" know these ids:
$contents = array(
'a'=>'Mary had a little lamb',
'b'=>'whose fleece was white as snow',
'c'=>'And everywhere that Mary went',
'd'=>'the lamb was sure to go'
);
// if we know the contentId
if ( isset($contents[$_POST['contentId']]) ) {
// send back the data associated with the contentId
echo $contents[$_POST['contentId']];
}
else {
echo 'unknown contentID';
}
die;
}
// if no contentId parameter has been sent at all, send the html document
?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function foo(contentID) {
$('#container').hide('fast', function() {
$('#container').load('?', {'contentId':contentID}, function() {
$('#container').show('normal');
});
});
}
</script>
</head>
<body>
<fieldset>
<button onclick="foo('a')">load content A</button>
<button onclick="foo('b')">load content B</button>
<button onclick="foo('c')">load content C</button>
<button onclick="foo('d')">load content D</button>
</fieldset>
<div id="container">Hello.</div>
</body>
</html>
The "important" part is that it passes the object {'contentId':contentID} to .load(), i.e. the request will contain a (post) parameter contentId=something. The php part of the script tests whether such a parameter is set or not using isset(). If there is, it tests whether it is has data associated with this contentId. The example uses a (static) array for this but it could be just anything.
This has some drawbacks. E.g. the browser doesn't cache the contents. Every time a button is hit data has to be sent forth and back between the server and the client. But you could use something like mod\rewrite or similar to let your php script react on urls like http://someserver/getContents/contentIdA , http://someserver/getContents/contentIdB, http://someserver/getContents/contentIdC and so on.
加载中,请稍侯......
精彩评论