php jQuery Ajax 返回 html 和 json 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13323393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Ajax return html AND json data
提问by Dylan Cross
I'm not sure if there is any way to do this or not, but this would solve so many of my problems if there is a simple solution to this.
我不确定是否有任何方法可以做到这一点，但是如果有一个简单的解决方案，这将解决我的许多问题。
What I need/want to be able to do is return HTML and JSON in my success of ajax request. The reason being, I want to request a file and return all of that page, but I also want to be able to return a specified set of information from the page in json, so I can use it for other things.
我需要/希望能够做的是在我的 ajax 请求成功时返回 HTML 和 JSON。原因是，我想请求一个文件并返回该页面的所有内容，但我也希望能够从 json 中的页面返回一组指定的信息，以便我可以将其用于其他用途。
This is what I'm doing now:
这就是我现在正在做的：
$.ajax({
type: "POST",
url: "inc/"+page+".php",
data: "id="+encodeURIComponent(pageID),
success: function(html){
$("body > .container").html(html);
}
});
This is what I'd like to be able to do:
这就是我希望能够做到的：
$.ajax({
type: "POST",
url: "inc/"+page+".php",
data: "id="+encodeURIComponent(pageID),
success: function(html){
$("body > .container").html(html);
$("title").html(json.PageTitle)
}
});
on the page that is being returned, I would specify what I want the title to be. (For instance, if it's a profile, I would return the user's name)
在返回的页面上，我会指定我想要的标题。（例如，如果是个人资料，我会返回用户名）
采纳答案by jheddings
Trying to mix the retun value to contain presentation and data seems like a potential for confusion. Why not split it into two calls and fetch the data on success of the other?
尝试混合 retun 值以包含演示文稿和数据似乎可能会造成混淆。为什么不把它分成两个调用并获取另一个调用成功的数据？
Something like:
就像是：
$.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);
}
});
});
回答by Jonathan Spiller
HTML and data wrapped in JSON
用 JSON 包装的 HTML 和数据
You can do it by returning a 2 element JSON array. The first element contains HTML and the second element contains another JSON array with the data inside. You just need to unwrap it carefully without breaking anything.
您可以通过返回一个 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);
Clientside
客户端
//Ajax success function...
success: function(serverResponse){
$("body > .container").html(serverResponse.html);
var data = JSON.parse(serverResponse.data);
$("title").html(data.page_title)
}
Note 1:I think this is what @hakre meant in his comment on your question.
注 1：我认为这就是 @hakre 在他对您的问题的评论中的意思。
Note 2:This method works, but I would agree with @jheddings that its probably a good idea to avoid mixing presentation and data. Coding karma will come back to bite.
注 2：此方法有效，但我同意 @jheddings 的观点，即避免混合演示文稿和数据可能是一个好主意。编码业力会回来咬人。
回答by NoPyGod
You also have the option of including the data in html5 data attributes
您还可以选择将数据包含在 html5 数据属性中
For instance, if you're returning a list of Animals
例如，如果您要返回一个 Animals 列表
<ul id="ZeAnimals" data-total-animals="500" data-page="2">
<li>Cat</li>
<li>Dog</li>
...
</ul>
You can then collect the data you require using
然后您可以收集您需要使用的数据
$('#ZeAnimals').data('total-animals')
Sometimes separating your request into two different ajax calls makes sense also.
有时将您的请求分成两个不同的 ajax 调用也很有意义。
回答by pocesar
You may use a library that does that automatically, like http://phery-php-ajax.net. Using
您可以使用自动执行此操作的库，例如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');
});
You may, as well, use phery.viewsto automatically load a portion of the site automatically, without having to worry about client-side specific code. You would have to put a unique ID on the container, containerin this example:
您也可以使用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();
