php传给js,然后js将数据显示在网页上,如果存在特殊字符如:' 半角单引号, 半角双引号,或者和html实体符号相关的 amp; 就会出现各种显示上的问题 php部分先将这些特殊的字符转义 ?phpfunction arrayRecursive($array){ foreach ($array as $key = $value)
php传值给js,然后js将数据显示在网页上,如果存在特殊字符如:' 半角单引号," 半角双引号,或者和html实体符号相关的 & 就会出现各种显示上的问题
php部分先将这些特殊的字符转义
<?php function arrayRecursive(&$array){ foreach ($array as $key => $value) { if (is_array($value)) { arrayRecursive($array[$key]);//如果是数组就进行递归操作 } else { if(is_string($value)){ $temp1= addslashes($value); $array[$key]= urlencode($temp1);//如果是字符串就urlencode }else{ $array[$key] = $value; } } } } function JSON($result) { $array=$result; arrayRecursive($array);//先将类型为字符串的数据进行 urlencode $json = json_encode($array);//再将数组转成JSON return urldecode($json);//最后将JSON字符串进行urldecode } $data = '"+123+'."'+&+"+<span class='\"new\"'>+&123"; // $data = '<script>var a=1;</script>'; $arr_data = Array( 'data' => Array( '1'=>$data, '2'=>$data, '3'=> Array( '123'=>'123', '123'=>'123', '123'=>'123' ) ) ); function arrayRecursive2(&$array){ $search = array ( "'&'i",//转换and符号 "'\"'i",//转换半角双引号 "'\''i",//转换半角单引号 "''i"//转换大于号 ); $replace = array ( "&", """, "'", "<", ">" ); foreach ($array as $key => $value) { if (is_array($value)) { arrayRecursive2($array[$key]);//如果是数组就进行递归操作 } else { if(is_string($value)){ $array[$key] = preg_replace($search, $replace, $value); }else{ $array[$key] = $value; } } } } function replace_html_entity($result){ $origin = $result; arrayRecursive2($origin); return $origin; } $encode_array = replace_html_entity($arr_data); echo JSON($encode_array); ?></span>
接着是js接受和html显示,以及div,span,input,textarea等相互转换显示的时候的问题:
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>无标题文档</title> <div id="J_div1"></div> <span id="J_span1"></span> <input type="text" id="J_input" value="" autocomplete="off" name="J_input"> <textarea cols="60" rows="4" id="J_textarea" value="" autocomplete="off" name="J_textarea"></textarea> <input type="hidden" id="J_hidden" value="" name="J_hidden"> <div id="J_div3"></div> <span id="J_span3"></span> <input type="text" id="J_input2" value="" autocomplete="off" name="J_input2"> <textarea cols="60" rows="4" id="J_textarea2" value="" autocomplete="off" name="J_textarea2"></textarea> <input type="hidden" id="J_hidden2" value="" name="J_hidden2"> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> function change_to_html_entity(string){ string=string.replace(/&/g,"&"); string=string.replace(/"/g,"""); string=string.replace(/'/g,"'"); string=string.replace(/,"<"); string=string.replace(/>/g,">"); return string; } function change_to_origin(string){ string=string.replace(/"/g,'"'); string=string.replace(/'/g,"'"); string=string.replace(/</g,"<"); string=string.replace(/>/g,">"); string=string.replace(/&/g,"&"); return string; } var string1,string2; var div_tpl = '<div id="J_div2">{word}'; var span_tpl = '<span id="J_span2">{word}'; $.ajax({ type: "POST", url: "getdata3.php", dataType:"JSON", success:function(data){ string1 = data.data[1]; string2 = change_to_origin(string1); $('#J_div1').html(string1); $('#J_span1').html(string1); $('#J_input').val(string2); $('#J_textarea').val(string2); $('#J_hidden').val(string2); $('body').append(div_tpl.replace('{word}',string1)); $('body').append(span_tpl.replace('{word}',string1)); $('#J_div3').text($('#J_hidden').val()); $('#J_span3').text($('#J_hidden').val()); $('#J_input2').val($('#J_div3').text()); $('#J_textarea2').val($('#J_span3').text()); $('#J_hidden2').val($('#J_span3').text()); } }); </script>