m_Orchestrate learning system---三十五、php数据和js数据的解耦：php数据（php代码）不要放到js代码中
一、总结
一句话总结：也就是以html为中介，用html存储数据，用js取数据
html 存 js 取 html 中介
json JSON.parse() html()
可以放在div标签里面，js中使用的时候直接找到这个div拿就可以了
也就是以html为中介
用html存储数据
<div id="fry_analyze_record_graph_{$vo['ar_id']}_option_data" style="display: none;">
{$vo['option_data_json']}
</div>
用js取数据
$('.fry_analyze_record_graph').change(function () {
var option_data_div_id=$(this).attr('id')+'_option_data';
var option_data=JSON.parse($('#'+option_data_div_id).html());
1、js数组转化为json数据？
JSON.stringify() JSON.parse()
jquery3.0后鼓励我们用元素的js和json间数据转换的方法
1、JS对象转JSON
方式：JSON.stringify(obj)
var json = {"name":"iphone","price":666}; //创建对象；
var jsonStr = JSON.stringify(json); //转为JSON字符串
console.log(jsonStr);
2、JS数组转JSON
//数组转json串
var arr = [1,2,3, { a : 1 } ];
JSON.stringify( arr );
3、JS对象数组转JSON
//数组转json串
var arr = [1,2,3, { a : 1 } ];
JSON.stringify( arr );
4、JSON转JS数组
//json字符串转数组
var jsonStr = '[1,2,3,{"a":1}]';
var jsarr=JSON.parse( jsonStr );
alert(jsarr[0]);
5、JSON转JS对象
var jsonString = '{"bar":"property","baz":3}';
var jsObject = JSON.parse(jsonString); //转换为json对象
alert(jsObject.bar); //取json中的值
2、php出队操作？
array_shift()
Example #1 array_shift() example
<?php
$stack = array("orange", "banana", "apple", "raspberry");
$fruit = array_shift($stack);
print_r($stack);
?>Exemplul de mai sus va afișa:
Array
(
[0] => banana
[1] => apple
[2] => raspberry
)
and orange will be assigned to $fruit.
3、在数据库中存储json时最常见的错误是什么？
数组 转化 json
忘记将数组转化为json，不转化的话直接存php数组是没办法存的
第12行 12 $analyze_record_group['arg_column_fields']=json_encode($arg_column_fields);
public function saveRecordGroupData(){
if(request()->isAjax()){
$arg_id=input('arg_id');
$mef_data=input('mef_data');
$analyze_record_group=db('analyze_record_group')->find($arg_id);
$analyze_record_group['arg_update_time']=time();
$analyze_record_group['arg_data']=$mef_data;
//得記錄列名
$mef_data_1=json_decode($mef_data);
$arg_column_fields=$mef_data_1[0];
array_shift($arg_column_fields);
$analyze_record_group['arg_column_fields']=json_encode($arg_column_fields);
//dump($analyze_record_group);die;
$ans=db('analyze_record_group')->update($analyze_record_group);
if($ans===false) return false;
else return true;
}
return false;
}
4、从数据库取数据时候的注意事项是什么？
排序 order
养成排序的好习惯，不要因为数据库数据的存储而造成数据乱序
$analyze_record_groups=db('analyze_record_group')->alias('arg')->join('analyze_record ar','ar.ar_id=arg.arg_ar_id')->where($map)->order('arg_id asc')->select();
5、php如何将以行为主的二维数组转化为以列为主的二维数组？
列 行 遍历
以列-行的方式做遍历即可
//以列->行的方式將儲存數據的二維數組裡面每一個參數對應的數據都提取出來
for ($j=0;$j<$arg_data_column_length;$j++){
$arg_data_process_data2_j=[];//每一列的數據
for($i=0;$i<$arg_data_length;$i++){
$arg_data_process_data2_j[]=$val1['arg_data'][$i][$j];
}
//將列名放到數組的鍵上，指向對應的值，比如高度
$arg_key=$arg_data_process_data2_j[0];
unset($arg_data_process_data2_j[0]);
$arg_data_process_data2[$arg_key]=$arg_data_process_data2_j;
}
需求就是将下面的数组转化为以列为主
array(4) {
[0] => array(6) {
[0] => string(14) "time_param_fry"
[1] => string(10) "luminosity"
[2] => string(3) "aaa"
[3] => string(16) "temperature(℃)"
[4] => string(8) "humidity"
[5] => string(3) "bbb"
}
[1] => array(6) {
[0] => string(4) "27/2"
[1] => string(2) "11"
[2] => string(1) "1"
[3] => string(2) "17"
[4] => string(2) "73"
[5] => string(2) "34"
}
[2] => array(6) {
[0] => string(3) "1/3"
[1] => string(2) "31"
[2] => string(1) "2"
[3] => string(2) "21"
[4] => string(2) "72"
[5] => string(1) "5"
}
[3] => array(6) {
[0] => string(9) "First Day"
[1] => string(1) "1"
[2] => string(1) "3"
[3] => string(1) "2"
[4] => string(1) "3"
[5] => string(1) "6"
}
}
结果
array(6) {
["time_param_fry"] => array(3) {
[1] => string(4) "27/2"
[2] => string(3) "1/3"
[3] => string(9) "First Day"
}
["luminosity"] => array(3) {
[1] => string(2) "11"
[2] => string(2) "31"
[3] => string(1) "1"
}
["aaa"] => array(3) {
[1] => string(1) "1"
[2] => string(1) "2"
[3] => string(1) "3"
}
["temperature(℃)"] => array(3) {
[1] => string(2) "17"
[2] => string(2) "21"
[3] => string(1) "2"
}
["humidity"] => array(3) {
[1] => string(2) "73"
[2] => string(2) "72"
[3] => string(1) "3"
}
["bbb"] => array(3) {
[1] => string(2) "34"
[2] => string(1) "5"
[3] => string(1) "6"
}
}
6、jquery找到当前select所选的option的值？
find option :selected
$(this).find("option:selected").val();
jQuery获取Select选择的Text和Value:
var checkText=jQuery("#select_id").find("option:selected").text(); //获取Select选择的Text
var checkValue=jQuery("#select_id").val(); //获取Select选择的option Value
var checkIndex=jQuery("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
var maxIndex=jQuery("#select_id option:last").attr("index"); //获取Select最大的索引值
jQuery添加/删除Select的Option项：
jQuery("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
jQuery("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
jQuery("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
jQuery("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
jQuery("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
jQuery("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
内容清空：
jQuery("#select_id").empty();
7、js判断为数组？
Array isArray()
1.对于Javascript 1.8.5（ECMAScript 5），变量名字.isArray( )可以实现这个目的
1 var a=[];
2 var b={};
3 Array.isArray(a);//true
4 Array.isArray(b)//false
2.如果你只是用typeof来检查该变量，不论是array还是object，都将返回‘objec'。 此问题的一个可行的答案是是检查该变量是不是object，
并且检查该变量是否有数字长度（当为空array时长度也可能为0,object的长度为undefined）。
var a=[];
var b={};
typeof a === 'object' && !isNaN(a.length)//true
typeof b === 'object' && !isNaN(b.length)//false
3.调用toString( )方法试着将该变量转化为代表其类型的string。
var a=[];
var b={};
Object.prototype.toString.call(a) === '[object Array]'//true
Object.prototype.toString.call(b) === '[object Array]'//false
8、php数据和js数据的解耦：php数据（php代码）不要放到js代码中？
html 存 js 取
json JSON.parse() html()
可以放在div标签里面，js中使用的时候直接找到这个div拿就可以了
也就是以html为中介
用html存储数据
<div id="fry_analyze_record_graph_{$vo['ar_id']}_option_data" style="display: none;">
{$vo['option_data_json']}
</div>
用js取数据
$('.fry_analyze_record_graph').change(function () {
var option_data_div_id=$(this).attr('id')+'_option_data';
var option_data=JSON.parse($('#'+option_data_div_id).html());
9、js自执行表达式的方法？
eval(string)
定义和用法
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
语法
eval(string)
| 参数 | 描述 |
|---|---|
| string | 必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。 |
返回值
通过计算 string 得到的值（如果有的话）。
说明
该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性，并通过该属性调用它，则 ECMAScript 实现允许抛出一个 EvalError 异常。
抛出
如果参数中没有合法的表达式和语句，则抛出 SyntaxError 异常。
如果非法调用 eval()，则抛出 EvalError 异常。
如果传递给 eval() 的 Javascript 代码生成了一个异常，eval() 将把该异常传递给调用者。
提示和注释
提示：虽然 eval() 的功能非常强大，但在实际使用中用到它的情况并不多。
实例
例子 1
在本例中，我们将在几个字符串上运用 eval()，并看看返回的结果：
<script type="text/javascript">
eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
var x=10
document.write(eval(x+17))
</script>
输出：
200
4
27
10、js的string转化为json？
JSON.parse(jsonstr)
1、jQuery插件支持的转换方式：
示例：
$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象
2、浏览器支持的转换方式(Firefox，chrome，opera，safari，ie)等浏览器：
示例：
JSON.parse(jsonstr); //可以将json字符串转换成json对象
JSON.stringify(jsonobj); //可以将json对象转换成json对符串
注：ie8(兼容模式),ie7和ie6没有JSON对象，推荐采用JSON官方的方式，引入json.js。
3、Javascript支持的转换方式：
eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json串中的表达式。
4、JSON官方的转换方式：
http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；
可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。
11、页面重新加载？
document loaction reload()
document.location.reload();
12、js获取json对象的key和val?
option_data[selected_column] []
for in ==
<script type="text/javascript">
getJson('age'); function getJson(key){
var jsonObj={"name":"傅红雪","age":"24","profession":"刺客"};
//1、使用eval方法
var eValue=eval('jsonObj.'+key);
alert(eValue);
//2、遍历Json串获取其属性
for(var item in jsonObj){
if(item==key){ //item 表示Json串中的属性，如'name'
var jValue=jsonObj[item];//key所对应的value
alert(jValue);
}
}
//3、直接获取
alert(jsonObj[''+key+'']);
}
</script>
// var option_data_selected=null;
// for(var x in option_data){
// if(x==selected_column){
// option_data_selected=option_data_selected[x]
// }
// }
var option_data_selected=option_data[selected_column];
console.log(option_data_selected);