和前一篇文章一样,直接上代码了,只是做个记录。
- 数据的提供页面,tigong.php
<?php
header("content-type:text/html;charset=utf-8");
echo '[{"name":"黎明","age":"12","sex":"男"},{"name":"小红","age":"12","sex":"女"},{"name":"增益","age":"22","sex":"男"}]';
?> - 使用eval得方法处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById("div1");
var bt1=document.getElementById("bt1");
bt1.onclick=function(){
//创建ajax对象,写兼容
if(window.XMLHttpRequest){
var xmlHttp=new XMLHttpRequest();
}else{
var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
};
//获取要发送的数据,我们这个例子没有
//设置发送数据的地址和方法
xmlHttp.open("POST","tigongjson.php");
//设置我们的请求头信息
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//绑定onreadystatechange事件
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
var data=xmlHttp.responseText;
//json字符串转换成为json对象
data=eval("("+data+")");
var str="";
for(var i=0;i<data.length;i++){
str+="姓名"+data[i].name+"<br>";
str+="年龄"+data[i].age+"<br>";
str+="性别"+data[i].sex+"<br>";
};
div1.innerHTML=str;
};
};
//发送数据
xmlHttp.send();
};
};
</script>
<style type="text/css">
#div1{
width:200px;
height:200px;
background:#f00;
color:#fff;
}
img{
width:200px;
}
</style>
<title>Document</title>
</head>
<body>
<div id="div1">
<img src="../php2/images/1.gif">
</div>
<br>
<button id="bt1">点击获取json数据</button>
</body>
</html> - 使用JSON.parse()方法进行处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById("div1");
var bt1=document.getElementById("bt1");
bt1.onclick=function(){
//创建ajax对象,写兼容
if(window.XMLHttpRequest){
var xmlHttp=new XMLHttpRequest();
}else{
var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
};
//获取要发送的数据,我们这个例子没有
//设置发送数据的地址和方法
xmlHttp.open("POST","tigongjson.php");
//设置我们的请求头信息
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//绑定onreadystatechange事件
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
var data=xmlHttp.responseText;
//json字符串转换成为json对象
data=JSON.parse(data);
var str="";
for(var i=0;i<data.length;i++){
str+="姓名:"+data[i].name+"<br>";
str+="年龄:"+data[i].age+"<br>";
str+="性别:"+data[i].sex+"<br>";
};
div1.innerHTML=str;
};
};
//发送数据
xmlHttp.send();
};
};
</script>
<style type="text/css">
#div1{
width:200px;
height:200px;
background:#f00;
color:#fff;
}
img{
width:200px;
}
</style>
<title>Document</title>
</head>
<body>
<div id="div1">
<img src="../php2/images/1.gif">
</div>
<br>
<button id="bt1">点击获取json数据</button>
</body>
</html>
使用原生ajax处理json组成的数组的更多相关文章
-
ajax请求 json格式和数组格式总结
php echo json_encode($data); $.ajax({ url:APP+"?a=total&c=collection", //请求的页面 type:&q ...
-
使用原生ajax处理json字符串
我们使用得还是wamp,如果不知道环境怎么搭建,请在我的日志里面找,此处不在累赘. 什么是json?JSON的全称是 Javascript Object Notation(javascript对象表示 ...
-
原生ajax接收json字符串(简单介绍)
什么是json? JSON的全称是 Javascript Object Notation(javascript对象表示法),是基于javascript对象字面量,如果单从眼睛看,JSON里的数据是被保 ...
-
原生ajax请求json数据
<?php header("content-type:text/html;charset=utf-8"); echo '{"name":"小明& ...
-
Servlet处理原生Ajax请求
萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介 Ajax(Asynchronous JavaScript and XML,异步JavaScript和 ...
-
jquery解析php通过ajax传过来的json二维数组对象
ajax获得php传过来的json二维数组对象,jquery解析 php代码: <?php $news = array( '武汉'=>array(1,2,3), '广州'=>arra ...
-
ASP.NET MVC Controller接收ajax post方式发送过来的json对象或数组数据
本例旨在说明我的一种Controller接收ajax提交(POST)过来的json对象或数组信息的方式,感觉应该有更好的方式,欢迎提出宝贵意见. JSON.stringify(jsonObj)不支持I ...
-
ajax数据请求3(数组json格式)
ajax数据请求3(数组json格式) <!doctype html> <html> <head> <meta charset="utf-8&quo ...
-
Springboot+ajax传输json数组以及单条数据的方法
Springboot+ajax传输json数组以及单条数据的方法 下面是用ajax传输到后台单条以及多条数据的解析的Demo: 结构图如下: 下面是相关的代码: pom.xml: <?xml v ...
随机推荐
-
Sublime无法使用package control安装插件
我之前想通过安装sftp,但是出现了这个问题,百度了很久才解决.东西也是从网上找的,现总结下: 网上说什么安装个新的,我也是简直醉了,其实新的并不好使. 但是,我们最好安装个新的,再继续下面的操作 ...
-
转载大神的dfs讲解
http://acm.hdu.edu.cn/forum/read.php?tid=6158 看完明白了好多! 关于剪枝,没有剪枝的搜索不太可能,这题老刘上课的时候讲过两个剪枝,一个是奇偶剪枝,一个是路 ...
-
Send User to a Portal Folder
Sometimes you would want to give users the option to click a button on the page and send them back t ...
-
supervisor 部署文档
supervisor 部署文档 supervisor 需要Python支持,如果不用系统的supervisor,单独安装python python 安装 #依赖 yum install python- ...
-
『C # 开发』VS 2008 修改默认生成代码模版
作为Coder,或许会因为每次写代码前要把版权信息Ctrl+C/V上去而蛋疼 ╮(╯▽╰)╭ 可作为Code Copyer,又何尝不蛋疼呢,怎么会容忍作业上署上别人的姓名,学号,XXX 还是要先S ...
-
C语言库函数探究
1.strlen()求字符串长度 //模拟实现strlen函数 #include<stdio.h> #include<stdlib.h> #include<string. ...
-
C++ 虚指针、成员变量与类对象的偏移地址
先给出一段代码实现 #include <iostream> using namespace std; class animal { protected: int age; public: ...
-
工控随笔_04_西门子_解决Step 7软件因授权问题不能打开的方式和方法
西门子的软件是授权软件,只有经过授权认证的用户才能使用,如果没有通过授权认证则不能 正常的使用软件的相关功能. 一.西门子授权不成功问题 如上图所示报故障代码: 000001-0505.报警文本为:未 ...
-
5N - 考试排名
C++编程考试使用的实时提交系统,具有即时获得成绩排名的特点.它的功能是怎么实现的呢? 我们做好了题目的解答,提交之后,要么“AC”,要么错误,不管怎样错法,总是给你记上一笔,表明你曾经有过一次错误提 ...
-
libgdx相关知识点
Gdx.graphics.setContinuousRendering(false); 设置图像为非连续自动渲染. 设置Opengl的混合模式,支持alpha属性 Gdx.gl.glBlendFunc ...