JSON

[JavaScript学习]通过Ajax获取对象信息(基于JSON方式)

字号+ 作者:H5之家 来源:H5之家 2017-11-10 09:01 我要评论( )

都快11月份了,天气还是炎热,保持在30多度,老家都穿棉袄了,深圳这鬼地方,我也是醉了。好吧,今天继续学习。 上一篇文章中我们介绍了如何通过Ajax使用基于XML格式的字符串返回对象的信息。使用XML格式的缺点是字符串中附加的标签太多,实际上有用的数据很

都快11月份了,天气还是炎热,保持在30多度,老家都穿棉袄了,深圳这鬼地方,我也是醉了。好吧,今天继续学习。

600.png

上一篇文章中我们介绍了如何通过Ajax使用基于XML格式的字符串返回对象的信息。使用XML格式的缺点是字符串中附加的标签太多,实际上有用的数据很少,造成传输时带宽的浪费。

我们在前面介绍过json对象,我们可以通过json格式的字符串来返回对象信息。来看下面的例子。

在这个例子中,同样在服务器端有一个Person类,我们创建一个Person.class.php文件,文件中的代码如下:

/** Person.class.php  **/  <?php   class Person{     private $id;     private $name;     private $age;     /** 公开的get和set方法 **/     public function getId(){       return $this->id;     }     public function setId($id){       $this->id = $id;     }     public function getName(){       return $this->name;     }     public function setName($name){       $this->name = $name;     }     public function getAge(){       return $this->age;     }     public function setAge($age){       $this->age = $age;     }   } ?>

在PersonService.php文件中,同样创建3个person对象,然后通过字符串拼接的方法将对象的信息拼接为JSON格式的字符串。最后将这个字符串返回。

/** PersonService.php **/ <?php   require_once 'Person.class.php';   header("Content-type: text/html; charset=utf-8");    $person1 = new Person();   $person1->setId(1);   $person1->setName("Leon");   $person1->setAge(23);      $person2 = new Person();   $person2->setId(2);   $person2->setName("Ada");   $person2->setAge(22);   $person3 = new Person();   $person3->setId(3);   $person3->setName("Mike");   $person3->setAge(25);   //拼接json字符串   $json = "[";   $json.="{";   // person1   $json.="id:";   $json.=$person1->getId();   $json.=",";   $json.="name:\"";   $json.=$person1->getName();   $json.="\",";   $json.="age:";   $json.=$person1->getAge();   $json.="},";   // person2   $json.="{";   $json.="id:";   $json.=$person2->getId();   $json.=",";   $json.="name:\"";   $json.=$person2->getName();   $json.="\",";   $json.="age:";   $json.=$person2->getAge();   $json.="},";   //person3   $json.="{";   $json.="id:";   $json.=$person3->getId();   $json.=",";   $json.="name:\"";   $json.=$person3->getName();   $json.="\",";   $json.="age:";   $json.=$person3->getAge();   $json.="}";   $json.= "]";   echo $json; ?>

注意,要返回json格式,需要使用header()函数来注明Content-type为text/html。

现在,在浏览器中直接访问这个php页面,就可以获取到一个json格式的返回字符串,如下面的样子:

[{id:1,name:"Leon",age:23},{id:2,name:"Ada",age:22},{id:3,name:"Mike",age:25}]

我们接着编写客户端代码。同样我们使用一个叫show.html的静态页面来作为显示页面。当访问这个页面的时候,页面中有一个按钮,点击这个按钮就可以从服务端获取所有的Person对象,然后将Person对象的属性打印在页面的指定区域中。

下面是show.html文档的代码,代码十分简单,在<body>中有一个按钮和一个<div>容器。当我们点击按钮的时候,会从服务器端获取所有的Person对象,并将它们的属性打印在容器中。

<!DOCTYPE html> <html lang="zh"> <head>   <meta charset="UTF-8">   <title>Ajax获取对象-基于XML方式</title> </head> <body>   <button id="btn">获取Person对象数据</button>   <div id="container"></div> </body> </html>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • json学习与cjson

    json学习与cjson

    2017-11-09 09:01

  • JSONJSON学习入门(了解什么是JSON)

    JSONJSON学习入门(了解什么是JSON)

    2017-11-05 16:01

  • Laravel学习教程之request validation的编写

    Laravel学习教程之request validation的编写

    2017-10-29 13:15

  • 学习笔记10-24-2(JSON)

    学习笔记10-24-2(JSON)

    2017-10-29 11:50

网友点评