jQuery Ajax возвращает данные html и json

Я не уверен, есть ли способ сделать это или нет, но это решило бы так много моих проблем, если есть простое решение этого.

что мне нужно/хочу, чтобы я мог сделать, это вернуть HTML и JSON в моем успехе ajax-запроса. Причина в том, что я хочу запросить файл и вернуть всю эту страницу, но я также хочу иметь возможность вернуть указанный набор информации со страницы в 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)
      }
      });

на возвращаемой странице Я бы указал, каким должен быть заголовок. (Например, если это профиль, я бы вернул имя пользователя)

9
ajax jquery json php

4 ответов

попытка смешать значение 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);
      }
    });
  });
8

HTML и данные, завернутые в JSON

вы можете сделать это, вернув массив JSON из 2 элементов. Первый элемент содержит HTML, а второй элемент содержит другой массив JSON с данными внутри. Вам просто нужно аккуратно развернуть его, ничего не сломав.

Serverside

$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, что это, вероятно, хорошая идея, чтобы избежать смешивания презентации и данных. Кодирование кармы вернется, чтобы укусить.

12

У вас также есть возможность включить данные в атрибуты данных html5

например, если вы возвращаете список животных

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

затем вы можете собрать необходимые данные с помощью

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

иногда разделение вашего запроса на два разных вызова ajax также имеет смысл.

1

вы можете использовать библиотеку, которая делает это автоматически, как 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 автоматически загружать часть сайта автоматически, без необходимости беспокоиться о специфическом коде на стороне клиента. Вам нужно будет поместить уникальный идентификатор на контейнер,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();
0