Question

在我的网站上，我将有一个“浏览目录”按钮，onclick将更改页面的几个元素以显示目录元素。我不希望整页重新加载，因为导航栏和新闻源等几个元素将保持不变。

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

基本上我不确定如何在页面的不同div中放置几个不同的组件。

我知道同时进行ajax调用是有限制的，所以我确定正确的方法是为每个div做一个独特的ajax调用。

一点指导就会很棒。

Answer 1

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

在您的html页面中：

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

在page.php中：

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

Answer 2

我不确定是否正确的决定是发送几个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]); }
  }
});

Answer 3

你可以使用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;

使用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);

 }});

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

例如

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

Answer 4

实际上，在页面上并行更新的十个或更多元素（每个元素由一个单独的ajax）将不会产生如此大的差异（除非您可以将您的网站部署到生产环境并且证明我错了，测试它）。

尽管如此，如果您希望将所有数据交换压缩为单个请求/响应ajax调用 - 这很可能，但在服务器端需要一定的灵活性（请参阅http://php.net/manual/en/function.json-encode.php）。即其中一个可能的解决方案是在服务器端生成json响应，生成一个键值对（JSON - javascript {}对象），其中键是元素的id，值是（new）html。

有很多ajax JS框架作为jQuery，prototype，dojo等（我会为这个选择jQuery）。

Ajax请求

$.ajax({
...
})

请参阅http://api.jquery.com/jQuery.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);
    });
}

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

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

4 个答案: