php数据库数据转换为js中的json对象,JSON.parse()和JSON.stringify()

最新推荐文章于 2024-04-30 00:45:00 发布

shueiyuan1983

最新推荐文章于 2024-04-30 00:45:00 发布

阅读量3.6k

点赞数

分类专栏： Javascript json

Javascript 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

json

1 篇文章 0 订阅

订阅专栏

<span style="font-family:Arial, Helvetica, sans-serif;"><span style="white-space: normal;">
</span></span><?php
/
1.在company数据user表中取出10条数据，保存为数组
2.在将数组转化为json格式，传递给js
3.用json解析器将传递过来的json字符串转化为json对象,
4.用document.write输出语句打印在页面上
*/
$conn = mysql_connect(“localhost”,”root”,”root”);   //连接数据库
mysql_query(“set names utf8″);                       //设置编码
mysql_select_db(“company”,$conn);                    //选择库


$sql = “select * from user limit 10″;                //在user表中查询10条数据
$res = mysql_query($sql);                            //执行sql语句
$arr = array();


while($row = mysql_fetch_array($res,MYSQL_ASSOC)){   //查询出来sql
$arr[] = $row;                                   //将查询出来的结果赋给数组$arr
}


$str = json_encode($arr);                           //将数组转化为json格式的字符串


?>


<script src=”json_parse.js”></script>                    <!– 引入json解析器 –>
<table>
<tr>
<th>uid</th><th>用户名</th><th>性别</th><th>email</th>
</tr>
<script>
var jsonString = ‘<?php echo $str;?>’;          //传递php中的数据给js


//document.write(jsonString);


var jsonObject = json_parse(jsonString);            //将json字符串转化为js中的json对象


for(var i = 0; i < jsonObject.length; i++){            //for循环打印
document.write(“<tr>”);
document.write(“<td>”,jsonObject[i].uid,”</td>”);
document.write(“<td>”,jsonObject[i].username,”</td>”);
document.write(“<td>”,jsonObject[i].sex,”</td>”);
document.write(“<td>”,jsonObject[i].email,”</td>”);
document.write(“</tr>”);
}
</script>
</table>

</pre><pre code_snippet_id="1946467" snippet_file_name="blog_20161024_1_275959" name="code" class="html">

parse用于从一个字符串中解析出json对象,如

var str = '{"name":"huangxiaojian","age":"23"}'

结果：

JSON.parse(str)

age: "23"
name: "huangxiaojian"
__proto__: Object

注意：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。

stringify()用于从一个对象解析出字符串，如

var a = {a:1,b:2}

结果：

JSON.stringify(a)

"{"a":1,"b":2}"

===============================

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="/tv/areaList/css/mobile.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/tv/areaList/js/jquery.js"></script>

<title>手机商城-区域导航</title>

<script type="text/javascript">
function sea(){
//alert('ssss');
//var x=<?php
//echo json_encode($area);
//?>;

var x=<?php echo json_encode($area);?>;
//alert(x);
var k=$('#kv').val();//获取input的值
var y=[];
var n=0;
var t='';
for(var i=0;i<x.length;i++){

//t="-"+x[i].areaname;
t=','+x[i].areaname; //把areaname值复制给一个空字符串变量
//alert(t);
if(t.indexOf(k)>0){//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 -1是没有出现
y[n]=x[i];
n++;

}

}
$('#listx').html('');
for (var i=0;i<y.length;i++){
t=$('#listx').html();
$('#listx').html(t+'<p><a href="searchResult.php?areaid='+y[i].areaid+'">'+y[i].areaname+'</a></p>');
}
//alert(JSON.stringify(y));
}
</script>

</head>
<body style="">

<div class="alla">
<a class="aa" herf="javascript:sea();"> < </a>
<a class="bb" ><a href="javascript:sea();" style="float:right;"><img src="/tv/areaList/images/all_b.png" width="28"></a></a>
<a class="cc">区域导航<input id="kv" value="" type="text" style="width:150px;"/></a>

<p>
<a href="">商品列表</a>
<a href="">服务列表</a>
</p>
</div>
<script>
$(".alla a.bb").click(function(){if($(".alla p").css("display")=="none"){$(".alla p").show();}else{$(".alla p").hide();}});
</script>

<div class="map" id="listx">

<p>
<?php foreach($area as $v){
echo '<a href="searchResult.php?areaid='.$v['areaid'].'">'.$v['areaname'].'</a>';
}
?>
</p>
</div>

<div class="footer">
<a href="#"><img src="/tv/wap/images/index_za.png" width="16"><span>首页</span></a>
<a href="/member/index.php?wap=1"><img src="/tv/wap/images/index_zb.png" width="16"><span>我的账户</span></a>
<a href="/mall/cart.php?wap=1"><img src="/tv/wap/images/index_zc.png" width="16"><span>购物车</span></a>
<a href="/mobile/searchResult.php?catid=0"><img src="/tv/wap/images/index_zd.png" width="16"><span>公告</span></a>
<a href="tel:400-072-9290"><img src="/tv/wap/images/index_ze.png" width="16"><span>客服</span></a>
</div>

</body>
</html>