ajax 使用json传输数据

1、为什么利用json传输数据?

xml数据生成过于复杂

xml数据解析过于复杂

2、关于json介绍

对象是属性的无序集合

在js中, 可以使用{}模拟这个集合

语法：

var json={属性:属性值,属性：属性值}

注意:属性可加可不加引号(包括单引号和双引号)

3、用json个表示具体的信息

(1)表示一个人的信息

var person = {name:'zhangsan',age:30};
alert(person.name+person.age); //显示张三30

(2)表示多个人的信息

var data=[{
        name:'zhangsan',
        age:30
        },{
        name:'lisi',
        age:18
        },{
        name:'wangwu',
        age:25
        }];
for(var i=0;i<data.length;i++){
        document.write(data[i].name+data[i].age);
        document.write('<hr>');
}

4、在php中如何使用json

json_encode(); //json编码

json_decode(); //json解码

mixed json_decode ( string $json [, bool $assoc = false] )

json 待解码的 json string 格式的字符串。

assoc 当该参数为 TRUE 时，将返回 array 而非 object 。

默认返回一个对象

$obj=json_decode($str);

加上参数true表示数组

$arr=json_decode($str,true);

生成json字符串

json表示大量数据, 在php中表示多个、大量的数据可以数组、对象来表示

也就是说, 在php, 如果想生成json字符串, 必须从数组、对象上生成。

复合数据类型：数组、对象

从数组中生成json字符串

$row=array('name'=>'lisi','age'=>30);
echo json_encode($row);

从对象中生成json字符串

class Person{
        public $name='zhangsan';
        public $age=20;
}
$p1=new Person();
$str=json_encode($p1);

关于json保存中文的问题

目前, json只支持utf-8, 如果想保存中文, 必须进行转码

$arr=array('name'=>'张三','age'=>30);
$arr['name']=iconv('gb2312','utf-8',$arr['name']);
echo json_encode($arr);

5、在javascript中json语法：

var str=xmlHttp.responseText;
var json=eval("("+ str +")"); 返回是json对象
var json=eval(str); 返回是json数组对象

理解:eval()函数可以将php中的json字符串转换为javascript可执行的json对象(包括数组对象)

6、案例：

php代码：

$row：一维数组 生成一个json格式的字符串

$data：二维数组 生成一个json数组格式的字符串

<?php
$row=array('username'=>'lisi','password'=>'222222');
echo json_encode($row); 输出:{"username":"lisi","password":"222222"}
/*
$data=array(
array('name'=>'zhangsan','age'=>18),
array('name'=>'lisi','age'=>30)
);
echo json_encode($data);//输出:[{"name":"zhangsan","age":18},{"name":"lisi","age":30}]
*/
?>

HTML代码：

<script language="javascript" src="public.js"></script>
<script>
var xhr=createxhr();
xhr.open('post','demo05.php');
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status==200){
                var value=xhr.responseText; //返回的是字符串
                //(1)
                var json=eval('('+value+')'); //返回是json对象
                alert(json.username+json.password);
                //(2)
                //var json=eval(value); //返回是json数组对象
                //alert(json[0].name+json[0].age);
                }
        };
xhr.send(null);
</script>

理解:

var json=eval('('+value+')'); 主要是针对关联数组

返回："{name:'zhangsan',age:18}"

访问方式:json.username+json.password

var json=eval(value); 主要是针对索引数组

返回："[{name:'zhangsan',age:18},{name:'lisi',age:20}]"

访问方式:json[0].name+json[0].age

注意：索引数组的解析也可以采用 var json=eval(value);

查询数据表中所有数据并生成json字符串返回

php代码：

<?php
//查询goods表中所有数据并返回
$sql="select name,price from goods order by id desc";
mysql_connect('localhost','root','111111');
mysql_select_db('shop');
mysql_query('set names gb2312');
$result=mysql_query($sql); //发送sql语句
$num=mysql_num_rows($result); //总行数
$data=array();
for($i=0;$i<$num;$i++){
$row=mysql_fetch_assoc($result);
$row['name']=iconv('gb2312','utf-8',$row['name']);
$data[]=$row;
}
mysql_close();
echo json_encode($data);

PHP代码:

<style>
tr{
background-color:#ffffff;
height:30px;
font-size:12px;
}
</style>
<script language="javascript" src='public.js'></script>
<script>
window.onload=function(){
var xhr=createxhr();
xhr.open('post','demo04.php');
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status==200)
                var value=xhr.responseText;
                var data=eval(value);
                for(var i=0;i<data.length;i++){
                //创建行元素
                var tr=document.createElement('tr');
                //创建序号td元素
                var tdID=document.createElement('td');
                tdID.innerHTML=i+1;
                //创建名称td元素
                var tdName=document.createElement('td');
                tdName.innerHTML=data[i].name;
                //创建价格td元素
                var tdPrice=document.createElement('td');
                tdPrice.innerHTML=data[i].price;
                //将三个td追加到tr元素
                tr.appendChild(tdID);
                tr.appendChild(tdName);
                tr.appendChild(tdPrice);
                document.getElementsByTagName('TBODY')[0].appendChild(tr);
                }
        };
        xhr.send(null);
}
</script>
<table id='tbData' width="800" cellspacing="1" cellpadding="4" bgcolor="#336699">
<tr>
<td>序号</td>
<td>商品名称</td>
<td>商品价格</td>
</tr>
</table>