如何在json数据中添加javascript?

时间:2012-12-20 17:32:42

标签: php jquery json

我想使用json和jquery显示图像预览和标题。我的PHP脚本对json数据进行编码并发送到jquery进行预览。数据包含html和javascript。在预览中,我看到HTML但省略了javascript标记。我相信json解析器会删除此标记。这是我的代码

PHP代码

$code = '
<div class="mosaic-block bar">
     <div class="mosaic-overlay">
         <div class="details">
              <h4>Sloppy Art - A Mess of Inspiration</h4>
              <p>via the Nonsense Society</p>
         </div>
     </div>
     <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/florian.jpg"/></div>
</div>
<script type="text/javascript">jQuery(function($){$(".bar").mosaic();});</script>';

$json_msg = array('success'=>true, 'msg'=> $code);
echo encode_json($json_msg);
exit;

function encode_json ($mixed_data) {
    if(is_array($mixed_data) && isset($mixed_data['msg'])) {
        $mixed_data['msg'] = utf8_encode($mixed_data['msg']);
    }
    return json_encode($mixed_data, JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_QUOT);
}

的Javascript

var form_options = {
    success:        ShowPreview,
    url:            url,
    type:           'post',
    dataType:       'json',
    clearForm:      false,
    resetForm:      false,
    cache:          false,
    timeout:        200000,
};
$('.preview-form').ajaxSubmit(form_options);


function ShowPreview(data) {
    if(data.success){
        $.fn.colorbox({html:data.msg});
    }
}

上面的代码显示了colorbox中的所有内容,但缺少此部分<script type="text/javascript">jQuery(function($){$(".bar").mosaic();});</script>如何转义json解析器正在解析的这个javascript?

修改

我可以用json解析器确认问题。我在表单提交选项中将数据类型从json更改为HTML,然后我在响应中找到了以下编码字符串    E \ u003Cscript type = \ u0022text / javascript \ u0022 \ u003EjQuery(function($){$(\ u0022.bar \ u0022).mosaic();}); \ u003C / script \ u003E

我使用以下代码将数据恢复为json      var data = jQuery.parseJSON(msg);

脚本标记已从数据中删除。还在试图弄清楚为什么解析器会删除javascript标签?

1 个答案:

答案 0 :(得分:1)

jQuery(function($){...});$(document).ready(function(){...});

的快捷方式

这意味着jQuery(function($){$(".bar").mosaic();});仅在ready()事件时执行。由于您要在颜色框中加载代码,因此ready()事件已被触发,此代码段将永远不会被触发。

最好的办法是单独托管您的javascript,并在$.getScript()回调中拨打success()

如果脚本部分本身缺失,那么您可以用这种方式创建一个JSON对象,

{
    html: "some html",
    js: "some js"
}

然后eval() javascript代码。 (是的,它的安全性很差)

此外,你必须摆脱jQuery(function($){})部分