以前只是知道json的格式而已，也做过的是从数据库获得数据然后弄成json的格式然后赋给HighCharts生成曲线，先把数据库的数据使用array()函数转换成数组，然后使用json_encode()函数将数组格式转换为json格式，从而再传输给HighCharts中的代码，从而生成曲线。 (json_code()和json_encode()的作用是一样的)

　　今天加强了json_code()函数和json_decode()函数的学习，通过$.GET()来获得后台的数据然后输出到前台。

　　下面是前台client.html的代码：

 <html>

   <head>

     <title>初始化网站基本信息</title>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width">

     <script type="text/javascript" src="jquery.js"></script>

   </head>

   <body>

         <script>

           $("document").ready(function() {

               var url = "server.php?inAjax=1&do=checkMember&username=ericwolf";

               var data={};

               $.get(url,data,function(res) {

             var jsonObj = eval("("+res+")");

             $("#username").val(jsonObj.username);

             $("#groupname").val(jsonObj.groupname);

             $("#uid").val(jsonObj.uid);

               });

           });

         </script>

         <div>

             用户名：<input type="text" name="username" id="username">

             <br/>

             会员组：<input type="text" name="groupname" id="groupname">

             <br>

             UID:<input type="text" name="uid" id="uid">

   </body>

 </html>

其中$.GET中的function(res)中的res是返回前台的数据，因为返回后的数据在后台的时候已经使用json_code()转换为json格式了，然后通过jsonObj.username将获取的数据赋给表单中。

　　下面是后台server.php的代码：

 <?php

 $inAjax = $_GET['inAjax'];

 $do = $_GET['do'];

 $do = $do?$do:"default";

 if(!$inAjax) return false;

 include 'db.class.php' ;

 switch($do) {

     case "checkMember":

           $username = $_GET['username'];

           $sql = "SELECT * FROM check_member WHERE username='$username'";

           $result = $dbObj->getOne($sql);

            echo (!empty($result))?json_encode($result):"null";

           break;

     case "default":

           die("nothing");

           break;

 }

其中db,class.php是连接数据库的代码，还有包含了getOne()函数，这个函数是从数据库获取一条数据的函数。

　　在浏览器中输入client.html后回车，然后在firebug中查看返回的数据如下图：

点击该链接后得到下图：

相应得到数据库的数据，并返回的格式是json格式。

这时可以看到，原本表单中没有数据，现在已经有了获得的数据：

使用Javascript Ajax 通信操作JSON数据 [上]的更多相关文章

  1. 使用Javascript Ajax 通信操作JSON数据 [下]

    上一篇文章我们获得后台数据库的数据后转换成json格式然后返回到前台,但只是返回的一位数组,这次我们返回二维和三维数组和对象. 前台代码shizhan.html: <!DOCTYPE html& ...

  2. 使用Ajax方式POST JSON数据包（转）

    add by zhj: 用ajax发送json数据时注意两点, 第一,使用JSON.stringify()函数将data转为json格式的字符串,如下 data: JSON.stringify({   ...

  3. Jquery重新学习之五[操作JSON数据]

    Jquery操作Json格式的数据在我们平时的项目中也经常运用:最近看Jquery权威指南中就有一章节是对这方面的整理总结:最后通过一个Asp.net结合一般处理程序ashx的实例,基本上能满足项目中 ...

  4. 前端学习——使用Ajax方式POST JSON数据包

    0.前言     本文解释怎样使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好 ...

  5. [转]javascript eval函数解析json数据时为什加上圆括号eval("("+data+")")

    javascript eval函数解析json数据时为什么 加上圆括号?为什么要 eval这里要添加 “("("+data+")");//”呢?   原因在于: ...

  6. js中如何操作json数据

    一.要想熟练的操作json数据,就先要了解json数据的结构,json有两种结构:对象和数组. 1.对象 一个对象以“{”开始,“}”结束.每个“名称”后跟一个“:”:“‘名称/值’ 对”之间使用“, ...

  7. 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法

    在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...

  8. Java操作JSON数据(4,end)--Jackson操作JSON数据

    Jackson是SpringBoot默认使用的JSON处理库,它可以轻松的将Java对象转换成JSON对象,同样也可以将JSON转换成Java对象.本文介绍下Jackson的基本使用方法,包括序列化和 ...

  9. Java操作JSON数据(3)--fastjson操作JSON数据

    fastjson是阿里巴巴的开源JSON解析库,它可以解析JSON格式的字符串,支持将Java Bean序列化为JSON字符串,也可以从JSON字符串反序列化到JavaBean.本文介绍下fastjs ...

随机推荐

  1. 条款36：绝对不要重新定义，继承而来的non-virtual函数

    重新定义一个继承而来的non-virtual函数可能会使得导致当函数被调用的时候,被调用的函数不是取决于调用的函数究竟属于的对象,而是取决于调用函数的指针或者引用的类型. 所以一般的说主要有两种观点在 ...

  2. 剑指offer--19.重建二叉树

    先序:根>左>右 中序:左>根>右 后序:左>右>根 e.g. {1,2,4,7,3,5,6,8} {4,7,2,1,5,3,8,6} 先序第一个元素是根节点,在中 ...

  3. 2017.11.27 stm8 low power-consumption debugging

    1 STM8L+LCD The STM8L-DISCOVERY helps you to discover the STM8L ultralow power features and todevelo ...

  4. UVA - 1331 Minimax Triangulation (区间dp)(最优三角剖分)

    题目链接 把一个多边形剖分成若干个三角形,使得其中最大的三角形面积最小. 比较经典的一道dp问题 设dp[l][r]为把多边形[l,r]剖分成三角形的最大三角形面积中的最小值,则$dp[l][r]=m ...

  5. IEEE1588精密网络同步协议（PTP）

    1  引言 以太网技术由于其开放性好.价格低廉和使用方便等特点,已经广泛应用于电信级别的网络中,以太网的数据传输速度也从早期的10M提高到100M,GE,10GE.40GE,100GE正式产品也于20 ...

  6. CS231n笔记列表

    课程基础1:Numpy Tutorial 课程基础2:Scipy Matplotlib 1.1 图像分类和Nearest Neighbor分类器 1.2 k-Nearest Neighbor分类器 1 ...

  7. 【转】 Pro Android学习笔记（八三）：了解Package（2）：包签名过程

    目录(?)[-] 类比例子 数字签名 文章转载只能用于非商业性质,且不能带有虚拟货币.积分.注册等附加条件.转载须注明出处:http://blog.csdn.net/flowingflying/ 在W ...

  8. HDU 2544 最短路（邻接表+优先队列+dijstra优化模版）

    最短路 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  9. Python模块之: ConfigParser 配置文件读取

    Python模块之: ConfigParser 配置文件读取   ConfigParser用于读写类似INI文件的配置文件,配置文件的内容可组织为组,还支持多个选项值(option-value)类型. ...

  10. Git学习笔记（三）远程库（GitHub）协同开发，fork和忽略特殊文件

    远程库 远程库,通俗的讲就是不再本地的git仓库!他的工作方式和我们本地的一样,但是要使用他就需要先建立连接! 远程库有两种,一个是自己搭建的git服务器:另一种就是使用GitHub,这个网站就是提供 ...