3

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

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

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

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

一点指导会很棒。

4

4 回答 4

2

使用 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();
于 2012-11-30T00:30:08.793 回答
0

我不确定发送几个 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]); }
  }
});
于 2012-11-30T00:40:19.843 回答
0

你可以使用 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);
于 2012-11-30T00:45:26.163 回答
0

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

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

有大量的 ajax JS 框架，如 jQuery、prototype、dojo 等（我将为此选择 jQuery）。

阿贾克斯请求

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

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

于 2012-11-30T00:51:00.940 回答