使用两个键创建单个数组

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代码版本，并且数据＆＃39;

上没有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。

虽然在理解了我的示例之后，如果您要构建一个可扩展的系统，并且您不只是在做一个简单的小部件应用程序，我建议您检查一些功能和支持方面更强大的内容，例如{{3}不幸的是，jquery tmpl已被弃用。

jquery - 从AJAX Response中分离JSON和HTML

3 个答案:

使用两个键创建单个数组