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

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

Попытка смешать значение повтора, чтобы содержать презентацию и данные, кажется путаницей. Почему бы не разделить его на два вызова и получить данные об успехе другого?

Что-то вроде:

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

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

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

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

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

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

Затем вы можете собрать требуемые данные, используя

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

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

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