jQuery Ajax返回html和json数据

Question

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

我需要/希望能够做的是在我成功的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)
      }
      });

在正在返回的页面上,我将指定我想要的标题.(例如,如果是个人资料,我会返回用户名)

Answer 1

用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的说法,避免混合表示和数据可能是一个好主意.编码业力会回来咬人.

Answer 2

试图混合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);
      }
    });
  });