jquery - 从AJAX Response中分离JSON和HTML

Question

我有一个像这样的AJAX响应。

[{"label":"label","label1":"67041","label2":"745","label3":"45191","label4":"11‌​464"}]<table id="table"></table>

它在响应中同时包含JSON和HTML。

我想将这两件事分开。

并将JSON用于我创建的图表功能。

然后将该表附加到div 。

任何建议都会非常有成效。

提前致谢。

Answer 1

在PHP中

$array = 'Your json array';
$html = 'Your html codes';

使用两个键创建一个数组

$newArray = array();

$newArray['json'] = $array;
$newArray['html'] = $html;

echo json_encode($newArray);

在Jquery

DataType: 'JSON',
success:function(response){

response.json = 'This is your json';
response.html = 'This is your html';

}

Answer 2

将HTML添加到JSON响应中并像使用其他值一样使用它（确保转义html）。 还使用JSONLint确保您的JSON有效。

[
    {
        "label": "label",
        "label1": "67041",
        "label2": "745",
        "label3": "45191",
        "label4": "11‌​464",
        "html": "<table id=\"table\"></table>"
    }
]

Answer 3

虽然我建议你不要这样做，因为是令人讨厌且难以维护，你可以通过使用正则表达式检测JSON对象来解决id，如下所示：

var data = '[{"label":"label","label1":"67041","label2":"745","label3":"45191","label4":"11‌464"}]<table  id="table"></table>';

var json_pattr = /\[.*\]/g;
var json_str = json_pattr.exec(data)[0];
var json_data = eval( '(' + json_str.substr(1, json_str.length-2) + ')') ;

var html_pattr = /\}\].*/g;
var html_text = html_pattr.exec(data)[0];
var html_data = html_text.substr(2);

//json_data = [object]   {"label":"label","label1":"67041","label2":"745","label3":"45191","label4":"11‌464"}
//html_data = [text] <table id="table"></table>

最好的解决方案是使用像jquery模板这样的模板引擎来定义你的html，然后通过$ .json获取你的数据，并在客户端上再次评估你想要的模板，不需要随你的数据一起发送它并在运行时进行这种处理。

JavaScript的

// assuming you keep receiving this
var data = 
   '[{"label":"label","label1":"67041","label2":"745","label3":"45191","label4":"11‌464"},'
  +'{"label":"label2","label1":"0000","label2":"222","label3":"333","label4":"11‌333"}]'
  +'<table id="table"></table>';

// parse the data with regex
var json_pattr = /\[.*\]/g;
var json_str = json_pattr.exec(data)[0];
var json_data = eval( '(' + json_str + ')') ;

var html_pattr = /\}\].*/g;
var html_text = html_pattr.exec(data)[0];
var html_data = html_text.substr(2);

//json_data = [object] {"label":"label","label1": ...
//html_data = [text] <table id="table"></table>   ...

// then use jquery templates to render it
var data = json_data;
$('body').append(html_data);
$('#trTemplate').tmpl(data).appendTo('#table'); 

HTML

<script id="trTemplate" type="text/x-jquery-tmpl">
   <tr>
        <td>${label}</td>
        <td>${label1}</td>
        <td>${label2}</td>
        <td>${label3}</td>
        <td>${label4}</td>
    </tr>
</script>

CSS

#table, td{ border:1px solid #000; padding:5px; }

这是一个有效的JSFiddle示例供您测试。

注意当你有多个{json对象，它会在表中创建更多行时}如何工作:)}

如果你只使用jquery模板，现在假设你可以实际修改你的输出而不是最好的事情是：

代码的新JavaScript版本仅包含模板，“数据”上没有HTML

$.json('http://server.com/url/service/someservice.something', function(data){
    $('body').append(<table id="#table></table>");
    $('#trTemplate').tmpl(data).appendTo('#table'); 
})

你觉得更简单吗？！ 希望这有助于指导您走正确的道路。

链接到jquery tmpl： http ：//knockoutjs.com/downloads/jquery.tmpl.min.js。

虽然在理解了我的例子之后，如果你正在构建一个可扩展的系统，并且你不只是做一个简单的小部件应用程序，我建议你检查一些更强大的功能和支持如Knockoutjs，因为jquery tmpl已被弃用不幸的是。