使用Javascript Ajax 通信操作JSON数据 [下]
上一篇文章我们获得后台数据库的数据后转换成json格式然后返回到前台,但只是返回的一位数组,这次我们返回二维和三维数组和对象。
前台代码shizhan.html:
<!DOCTYPE html>
<html>
<head>
<title>json数据获取</title>
<meta charset="utf-8">
<script src='jquery.js'></script>
<script type="text/javascript">
$("document").ready(function() {
var url="shizhan.php";
var data={"do":"first"}; $.getJSON(url,data,function(res){
$("#username").val(res.username);
$("#password").val(res.password);
}); var data={"do":"second"};
$.getJSON(url,data,function(res) {
$("#members").val(res.third.members.username);
}); var data={"do":"third"};
$.getJSON(url,data,function(res){
$("#address").val(res.address[1].username);
}); });
</script>
</head>
<body>
<h2>一位数组json数据显示</h2>
<input type="text" name="username" id="username" /><br/>
<input type="password" name="password" id="password"> <h2>二位数组json数据显示</h2>
<textarea id="members"></textarea> <h2>三位数组json数据显示</h2>
<textarea id="address"></textarea>
</body>
</html>
这里我们用$.getJSON(url,data,callback)来获得我们从url处返回的json格式的数据,注意,$.getJSON()中的JSON必须大写。
并且这时我们传递给后台的参数不把它放在url的末尾,而是直接放在新定义的data变量中。所以后台程序获取参数时不再使用$_GET[]了,而是使用$_REQUEST[].
还有一点值得提醒的是,在将返回得到的json格式的数据时,如果后台的二位数组中的第一位是['1'],则我们在前台赋给变量中的数据的格式应为上述代码中的
$("#address").val(res.address[1].username); ,而不是 $("#address").val(res.address.1.username); ,而如果后台的二维或者是三维数组的第一位是['third']等英文时,则可用上述代码中的 $("#members").val(res.third.members.username); .
后台代码:
<?php $do=$_REQUEST['do']; $member['username']='慕课网';
$member['password']='mukewang'; $members['1']['username']='张三';
$members['1']['password']='zhangsan';
$members['2']['username']='李四';
$members['2']['password']='lisi';
$members['2']['address']='朝阳区'; $members['third']['members']['username']='我是第三个用户名'; class addressClass{
public $address = array(); public function setAddress($array) {
$this->address=$array;
} public function getAddrss() {
return $this->address;
}
} $addressObj = new addressClass(); $addressObj->setAddress($members); switch($do) {
case 'first' : echo json_encode($member);break; case 'second': echo json_encode($members);break; case 'third' : echo json_encode($addressObj);break;
}
后台代码中我们使用json_encode()函数来将一位数组,二维数组,三位数组和对象转换为json格式的数据。
使用Javascript Ajax 通信操作JSON数据 [下]的更多相关文章
- 使用Javascript Ajax 通信操作JSON数据 [上]
以前只是知道json的格式而已,也做过的是从数据库获得数据然后弄成json的格式然后赋给HighCharts生成曲线,先把数据库的数据使用array()函数转换成数组,然后使用json_encode( ...
- 使用Ajax方式POST JSON数据包(转)
add by zhj: 用ajax发送json数据时注意两点, 第一,使用JSON.stringify()函数将data转为json格式的字符串,如下 data: JSON.stringify({ ...
- Jquery重新学习之五[操作JSON数据]
Jquery操作Json格式的数据在我们平时的项目中也经常运用:最近看Jquery权威指南中就有一章节是对这方面的整理总结:最后通过一个Asp.net结合一般处理程序ashx的实例,基本上能满足项目中 ...
- 前端学习——使用Ajax方式POST JSON数据包
0.前言 本文解释怎样使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好 ...
- [转]javascript eval函数解析json数据时为什加上圆括号eval("("+data+")")
javascript eval函数解析json数据时为什么 加上圆括号?为什么要 eval这里要添加 “("("+data+")");//”呢? 原因在于: ...
- js中如何操作json数据
一.要想熟练的操作json数据,就先要了解json数据的结构,json有两种结构:对象和数组. 1.对象 一个对象以“{”开始,“}”结束.每个“名称”后跟一个“:”:“‘名称/值’ 对”之间使用“, ...
- 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法
在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...
- Java操作JSON数据(4,end)--Jackson操作JSON数据
Jackson是SpringBoot默认使用的JSON处理库,它可以轻松的将Java对象转换成JSON对象,同样也可以将JSON转换成Java对象.本文介绍下Jackson的基本使用方法,包括序列化和 ...
- Java操作JSON数据(3)--fastjson操作JSON数据
fastjson是阿里巴巴的开源JSON解析库,它可以解析JSON格式的字符串,支持将Java Bean序列化为JSON字符串,也可以从JSON字符串反序列化到JavaBean.本文介绍下fastjs ...
随机推荐
- spring boot + thymeleaf 报错 org.thymeleaf.exceptions.TemplateInputException
org.thymeleaf.exceptions.TemplateInputException: Error resolving template "admin/verifyPassword ...
- The RK3066/RK30SDK Android 4.2 audio codec has a bug!
在文件kernel/sound/soc/soc-core.c中,函数soc_bind_dai_link引入了一个新定义的宏CODEC_NAME_CMP,这个新玩意导致了后面的strcpy(p_code ...
- @angular/cli项目构建--组件
环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...
- https页面 和 http请求的问题
(1)强制升级http 静态资源地址为https地址 https页面中不能使用http请求,http页面中可以使用https请求. 关于在https 页面有一些http的请求,可以在<head& ...
- 真机环境spotlight光源丢失
maya做好的模型生成的fbx,导入到unity之后,pc运行正常,到了ios真机上发现光线丢失,场景内物体都是暗暗的,查出来原因是spot光源丢失了,选中spot光源,在其Render Mode里, ...
- AtCoder Beginner Contest 087 D - People on a Line
Time limit : 2sec / Memory limit : 256MB Score : 400 points Problem Statement There are N people sta ...
- swing之flowlayout
import java.awt.FlowLayout; import javax.swing.JButton; import javax.swing.JFrame; //1.继承 JFrame类 // ...
- 学习动态性能表(22)V$resource_limit
学习动态性能表 第20篇--V$resource_limit 2007.6.15 就一条SQL语句供你参考: select * from V$RESOURCE_LIMIT where resourc ...
- BZOJ3745:[COCI2015]Norma
浅谈离线分治算法:https://www.cnblogs.com/AKMer/p/10415556.html 题目传送门:https://lydsy.com/JudgeOnline/problem.p ...
- jenkins 参数化构建和增加环境变量
1.参数化构建 2.增加环境变量 prepare an environment for the run,需要安装Environment Injector插件