11

我不确定是否有任何方法可以做到这一点，但如果有一个简单的解决方案，这将解决我的很多问题。

我需要/想要做的是在我成功的 ajax 请求中返回 HTML 和 JSON。原因是，我想请求一个文件并返回该页面的所有内容，但我也希望能够以 json 格式从页面返回一组指定的信息，这样我就可以将它用于其他事情。

这就是我现在正在做的事情：

     $.ajax({
    type: "POST",
    url: "inc/"+page+".php",
    data: "id="+encodeURIComponent(pageID),
    success: function(html){

        $("body > .container").html(html);

      }
      });

这就是我希望能够做到的：

     $.ajax({
    type: "POST",
    url: "inc/"+page+".php",
    data: "id="+encodeURIComponent(pageID),
    success: function(html){
        $("body > .container").html(html);
            $("title").html(json.PageTitle)
      }
      });

在返回的页面上，我会指定我想要的标题。（例如，如果它是个人资料，我会返回用户名）

4

4 回答 4

12

用 JSON 包装的 HTML 和数据

您可以通过返回一个 2 元素 JSON 数组来实现。第一个元素包含 HTML，第二个元素包含另一个 JSON 数组，其中包含数据。你只需要小心地打开它而不破坏任何东西。

服务器端

$html = '<div>This is Html</div>';
$data = json_encode(array('page_title'=>'My Page'));
$response = array('html'=>$html, 'data'=>$data);
echo json_encode($response);

客户端

//Ajax success function...

success: function(serverResponse){
    $("body > .container").html(serverResponse.html);
    var data = JSON.parse(serverResponse.data);
    $("title").html(data.page_title)
  }

注1：我认为这就是@hakre 在他对您的问题的评论中的意思。

注意 2：此方法有效，但我同意 @jheddings 的观点，即避免混合表示和数据可能是个好主意。编码业力会回来咬人。

于 2012-11-10T16:23:04.963 回答
9

试图混合 retun 值以包含表示和数据似乎可能会造成混淆。为什么不将它分成两个调用并获取另一个成功的数据？

就像是：

 $.ajax({
  type: "POST",
  url: "inc/"+view_page+".php",
  data: "id="+encodeURIComponent(pageID),
  success: function(html) {
    $("body > .container").html(html);
    $.ajax({
      type: "POST",
      url: "inc/"+data_page+".php",
      data: "id="+encodeURIComponent(pageID),
      success: function(json) {
        $("title").html(json.PageTitle);
      }
    });
  });
于 2012-11-10T15:40:57.433 回答
1

您还可以选择将数据包含在 html5 数据属性中

例如，如果您要返回 Animals 列表

<ul id="ZeAnimals" data-total-animals="500" data-page="2">
    <li>Cat</li>
   <li>Dog</li>
   ...
</ul>

然后，您可以收集您需要使用的数据

$('#ZeAnimals').data('total-animals')

有时将您的请求分成两个不同的 ajax 调用也很有意义。

于 2012-11-12T03:32:32.383 回答
0

您可以使用自动执行此操作的库，例如http://phery-php-ajax.net。使用

Phery::instance()->set(array(
  'load' => function(){
    /* mount your $html and $json_data */
    return 
      PheryResponse::factory()
      ->json($json_data)
      ->this() // points to the container
      ->html($html); 
  }
))->process();

$(function(){
  var $container = $('body > .container');
  $container.phery('make', 'load'); // or $container.phery().make('load')
  $container.bind('phery:json', function(event, data){
    // deal with data from PHP here
  });
  $container.phery('remote');
});

您也可以使用phery.views自动加载网站的一部分，而不必担心客户端特定的代码。您必须在容器上放置一个唯一 ID，container在此示例中：

$(function(){
  phery.view({
    '#container': {}
  });
});

Phery::instance()->views(array(
  '#container' => function($data, $params){
    /* do the load part in here */
    return 
      PheryResponse::factory()
        ->render_view($html)
        ->jquery('.title')->text($title);
  }
))->process();
于 2012-11-12T03:21:50.290 回答