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

在我的网站上，我会有一个“浏览目录”按钮，点击它可以改变页面的几个元素来显示目录元素。我不想重新加载整个页面，因为导航栏和新闻提要等几个元素将保持不变

我的问题是如何使用ajax onclick更改几个不同的div

基本上，我不知道如何在一个页面的不同div中放置几个不同的组件

我知道同时进行ajax调用是有限制的，所以我确信正确的方法不是为我的每个div进行唯一的ajax调用

---

有一点指导就好了。

使用jQuery，您可以为需要更新的每个块获得一个json元素数组：

在html页面中：

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

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

在page.php中：

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

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

---

我不确定发送几个ajax请求是否是正确的决定。只需创建一个具有唯一属性值的请求，以便服务器知道您需要哪个块。在服务器端，所有必需的块都连接在json对象中，并将其返回给客户端。之后，只需在应该是的块上解析对象。比如说

$.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]); }
  }
});

您可以使用json

范例

php请求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; 

如果parce函数中有错误 替换空格

范例

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

---

实际上，页面上并行更新的十个或更多元素（每个元素都由单独的ajax进行更新）不会有太大的区别（除非您可以将您的网站部署到生产环境中进行测试，并证明我错了）

尽管如此，如果您希望将所有数据交换压缩到一个请求/响应ajax调用中，这是很有可能的，但在服务器端确实需要一定的灵活性（请参阅）。 也就是说，一个可能的解决方案是在服务器端生成json响应，它生成一个键值对（json-javascript{}对象），键值是元素的id，值是（新的）html

有很多ajax JS框架，如jQuery、prototype、dojo等（我将为这一个选择jQuery）

Ajax请求

$.ajax({
...
})

看

服务器响应

// 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);
    });
}

---

这是一个基本的大纲，但应该能让你朝着正确的方向前进。

你可以打一个电话，返回每个部分所需的所有数据。你能展示一下到目前为止你有什么吗？