json

最简json格式

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }

json_encode()用法： //把对象转成json

<?php
$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);

echo json_encode($arr);
?>

输出结果：{"a":1,"b":2,"c":3,"d":4,"e":5}

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .p1{color:red;}
        #append{border:1px solid blue;}
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            $('#btn3').bind("click", function() {
                $.ajax({
                    type : 'post', //请求方式
                    url : 'b', //请求地址
                    dataType : 'json', //期望得到的数据类型
                    success : function(msg) { //处理函数
                        alert(msg.name + ':' + msg.age+": "+msg.hobby[0].name+': '+msg.hobby[1].id);
                        var hobbies=msg.hobby;
                        $.each(hobbies, function (i, hby) {
                            $("#append").append("id: "+hby.id+" hobby: "+hby.name);
                        });
                    }
                });
            });
            $.each( { name: "John", lang: "JS" }, function(i, n){
                alert( "Name: " + i + ", Value: " + n );
            });
            $("p").append("<div class='p1'>123</div>");
            $("p").append("<div class=\"p1\">789</div>");
        });
    </script>
</head>
<body>
<input type='button' id='btn3' value='$.ajax()  json' />
<p></p>
<div id="append"></div>
</body>
</html>

json文件（文件名为 b）(任意)

{"name":"kangjia",
 "age":1234,
 "hobby":[
    { "id":1,
      "name":"play"
    },
    {"id":2,
     "name":"eat"
     }
  ]
}

$.getJson()

0.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>$.getJSON 最简单吧，还能跨域请求！</p>
<button id="bt" type="button" >$.getJSON</button>
<div id="name"></div>
<div id="age"></div>
<script src="jquery.min.js"></script>
<script>
    $("#bt").click(function () {
        var url="a.php";
        var data={name:'a',age:12}
        $.getJSON(url,data,function (msg) {
            //alert(msg);
            $("#name").html(msg.name);
            $("#age").html(msg.age);
            console.log("name: "+msg.name+" ;age: "+msg.age);
        });
    });
</script>
</body>
</html>

a.php

<?php

$name=$_GET['name'].'abc';
$age=$_GET['age']+11;
$list=array("name"=>$name,"age"=>$age);
echo json_encode($list);

$.post();

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>$.post() 最后要加上参数 "json",指定返回类型为json</p>
<button id="bt" type="button" >2btn</button>
<div id="name"></div>
<div id="age"></div>
<div id="hobby"></div>
<script src="jquery.min.js"></script>
<script>
    $("#bt").click(function () {
        var url="b.php";
        var data={name:'xiaoming',age:12,hobby:'swimming'}
        $.post(url,data,function (msg) {    
            //alert(msg);
            $("#name").html(msg.name);
            $("#age").html(msg.age);
            $("#hobby").html(msg.hobby);
            console.log("name: "+msg.name+" ;age: "+msg.age);
        },"json");
    });
</script>
</body>
</html>

b.php

<?php

$name=$_POST['name'].'abc';
$age=$_POST['age']+11;

$hobby=$name.' like '.$_POST['hobby'];
$list=array("name"=>$name,"age"=>$age,"hobby"=>$hobby);
echo json_encode($list);

$.get()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>$.get() 最后要加上参数 "json",指定返回类型为json,传递参数是，还要加上时间戳，可能还要解决缓存，不太推荐</p>
<button id="bt" type="button" >$.get</button>
<div id="name"></div>
<div id="age"></div>
<div id="hobby"></div>
<script src="jquery.min.js"></script>
<script>
    $("#bt").click(function () {
        var url="c.php";
        var data={name:'xiaoming',age:12,hobby:'swimming',
        _:new Date().getTime()}   /* $.get() 需要加时间戳，好像还需要解决缓存 ，不推荐吧*/    /* 后来试了一下，又不需要时间戳了。。*/
        $.get(url,data,function (msg) {
            //alert(msg);
            $("#name").html(msg.name);
            $("#age").html(msg.age);
            $("#hobby").html(msg.hobby);
            console.log("name: "+msg.name+" ;age: "+msg.age);
        },"json");
    });
</script>
</body>
</html>

c.php

<?php

$name=$_GET['name'].'hehe';
$age=$_GET['age']+100;
$hobby=$name.' like '.$_GET['hobby'];
$list=array("name"=>$name,"age"=>$age,"hobby"=>$hobby);
echo json_encode($list);

还有底层的$.ajax()之 post json

3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>$.ajax 之 post json</p>
<button id="bt" type="button" >$.ajax</button>
<div id="name"></div>
<div id="age"></div>
<div id="hobby"></div>
<script src="jquery.min.js"></script>
<script>
    $("#bt").click(function () {
                $.ajax({
                    type : 'post',
                    url : 'd.php',
                    data:"name=kang&age=12",        //这里是字符串
                    dataType : 'json',                                //  dataType
                    success : function(msg) {
                            $("#name").html(msg.name);
                            $("#age").html(msg.age);
                    }
                });
    });
</script>
</body>
</html>

d.php

<?php

$name=$_POST['name'].'hehe';
$age=$_POST['age']+10000;
$list=array("name"=>$name,"age"=>$age);
echo json_encode($list);

标准json

{
"records":
    [
       {
          "Name" : "Alfreds Futterkiste",
          "City" : "Berlin",
          "Country" : "Germany"
       },
       {
          "Name" : "Berglunds snabbköp",
          "City" : "Luleå",
          "Country" : "Sweden"
       }
    ]
}

省略json 直接是[] 开始

    [
       {
          "Name" : "Alfreds Futterkiste",
          "City" : "Berlin",
          "Country" : "Germany"
       },
       {
          "Name" : "Berglunds snabbköp",
          "City" : "Luleå",
          "Country" : "Sweden"
       }
    ]

posted @ 2016-02-19 10:40 gyz418 阅读(189) 评论(0) 收藏举报

刷新页面返回顶部

gyz418

json

公告