以前只是知道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. 1008 Envy(好题¥)

    1008: Envy 时间限制: 1 Sec  内存限制: 128 MB提交: 288  解决: 61[提交][状态][讨论版] 题目描述 今年的 ACM 比赛推出了一个赛后的娱乐活动,所有参赛选手排 ...

  2. 51nod 1257 01分数规划/二分

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1257 1257 背包问题 V3 基准时间限制:3 秒 空间限制:1310 ...

  3. websphere6.1升级

    1.到IBM websphere官方网站下载相应版本的更新包,如6.1.0-WS-WASSDK-WinX32-FP0000021.pak和6.1.0-WS-WAS-WinX32-FP0000021.p ...

  4. vs2010 oraclelient 引用问题

    不能正常引用 oracleclent :错误信息如下 ================================================================= 排除1. 当前 ...

  5. yii2.0缓存的使用

    1.片段缓存(针对于视图中的某部分进行缓存): <?php 设置有效时间 $time=15; 缓存依赖,存入文件.当文件内容发生改变是才会刷新新内容 $dependecy=[ 'class'=& ...

  6. hdu4771 Stealing Harry Potter's Precious(DFS,BFS)

    练习dfs和bfs的好题. #include<iostream> #include<cstdio> #include<cstdlib> #include<cs ...

  7. centos type.h 编译错误问题

    # ifndef __int8_t_defined # define __int8_t_defined __intN_t (, __QI__); __intN_t (, __HI__); __intN ...

  8. Java 面向对象编程 tricks

    方法中描述了参数: 1. 构造器重载 重载构造器时,使用描述了参数的静态工厂方法名,这样做的意义何在呢?就在于为动作赋予意义,提升代码的可解释性: 传统的实例化方式: Complex fulcrumP ...

  9. 微信小程序 报错Setting data field "variableName" to undefined is invalid.

    Setting data field "variableName" to undefined is invalid. 将数据字段“variableName”设置为未定义是无效的. ...

  10. 最长递增子序列 LIS 时间复杂度O(nlogn)的Java实现

    关于最长递增子序列时间复杂度O(n^2)的实现方法在博客http://blog.csdn.net/iniegang/article/details/47379873(最长递增子序列 Java实现)中已 ...