如何使用ajax onclick更改网页的多个部分？

In my website I will have a "browse catalogue" button, which, onclick will change several elements of the page to display the catalogue element. I dont want a full page reload because several elements such as the nav bars and news feed will stay the same.

My question is how can i change several different divs with ajax onclick?

Essentially im not sure how to do place several different components in different divs across a page.

And i know there's a limit on simultaneous ajax calls, so im sure the proper way to do it wouldnt be to make a unique ajax call for each of my divs.

A little guidance would be great.

Using jQuery, you can get an json array of elements for each block that needs to be updated:

In your html page:

$.get("page.php?id=42",
   function(result){
     $('#title').text(result['title']);
     $('#description').text(result['description']);
     $('#price').text(result['price']);
   }, "json");

In page.php:

$result = array('title' => 'foo', 'description' => 'bar', 'price' => 3);
echo json_encode($result);
header('Content-Type: application/json');
die();

I'm not sure if the right decision will be to send several ajax requests. Just create a request with unique attribute value, in so shape that server will know which blocks you need. On server side all required blocks concatenate in json object, and return it to client. After just parse object on blocks that should be. For example

$.ajax({
  url : 'http://your.server.doment',
  data : 'block[]=1&block[]=7&block[]=15',
  type : 'post',
  dataType : 'json',
  success : function (object){
    for( el in object) { $('#block_'+el).html(object[el]); }
  }
});

you can use json

example

php request ajax

$div1="<table><tr><td>x</td></tr></table>";
$div2="<table><tr><td>x</td></tr></table>";
$div3="<table><tr><td>x</td></tr></table>";

$json = '{"div1":"'.$div1.'","div2":"'.$div2.'","div3":"'.$div3.'"}';

return $json; 

uses jquery

$.ajax({url: 'ajax/test.php',
     success: function(data) {

      var obj = JSON.parse(data);

       $("mydiv1").html(obj.div1);
       $("mydiv2").html(obj.div2);
       $("mydiv3").html(obj.div3);

 }});

if you have a error in the parce function replace spaces

example

    $arr =array("
","\t");
    $div1= str_replace($arr,"",$div1);

Practically, ten or more elements updated in parallel on the page (each by a separate ajax) will not make such a big difference (unless you can test it with your website deployed into productive environment and prove I am wrong).

Nonetheless, if you wish to compact all the data exchange to one single request/response ajax call - it is very well possible but does require certain flexibility on the server side (see http://php.net/manual/en/function.json-encode.php). I.e. one of the possible solutions is to produce json response on the server side, that generates a key-value pairs (JSON - javascript {} object) with keys being id of your elements and values being (new) html.

There are tons of ajax JS frameworks as jQuery, prototype, dojo, etc. (I will pick jQuery for this one).

Ajax request

$.ajax({
...
})

See http://api.jquery.com/jQuery.ajax/

Server response

// Assume we got
// var data = {key1:'html1',key2: 'html2'};

// Ajax handle can look like
success(data) {
    $.each(data, function(key, val){
        //console.log(key, val);
        // Do some checks here.. But key should indicate #id of html elements
        $(key).empty().append(html);
    });
}

This is a basic outline but should keep you going into the right direction.