jQuery - Creating a dynamic content loader using $.get()_问答_开发者

jQuery - Creating a dynamic content loader using $.get()

开发者 https://www.devze.com 2022-12-23 16:40 出处：网络

(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.

(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

What I would really like to do is to collect all of these files into a single file and give each div/container it's unique ID and just pick up the content from those. So i won't need so many separate files laying around.

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.