文档章节

【原创】ajax获取json / $.each遍历 / $("").html 塞到dom中

柴高八斗之父
 柴高八斗之父
发布于 2017/09/08 19:36
字数 223
阅读 22
收藏 1

先看效果截图:

js-依赖jquery 

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
	$('#btn').on('click', function () {
        var thishtml=""
        $.ajax({
            url: 'data_list.html', //这里直接放data_list.json也可以
            dataType:'json',
            method: 'get',
            success: function (data) {
            	console.log(data)
				//单个获值
				//var na = (data[0].name)
				//$(".panel").append(na);
				
				//遍历出来    格式:jQuery.each(object, [callback])
				$.each(data,function(i,item){ 
					thishtml+="姓名:"+item["name"]+"<br>"; 			
					thishtml+="性别:"+item["sex"]+"<br>"; 
					thishtml+="邮箱:"+item["email"]+"<br>";  //strHtml反复拿值做字符串拼接
					alert(thishtml)
					thishtml+="<hr>" 
				}) 
				//塞到页面的dom中
				$(".panel").html(thishtml);
            },
            error:function(){ 
					alert("error!"); 
			}
        })
    })
})
</script>

data_list.html-上面的ajax取的数据源 , 其实就是一个空白的html,里面放的json

[ 
	{ 
	"name":"张国立", 
	"sex":"男", 
	"email":"zhangguoli@123.com" 
	}, 
	{ 
	"name":"张铁林", 
	"sex":"男", 
	"email":"zhangtieli@123.com" 
	}, 
	{ 
	"name":"邓婕", 
	"sex":"女", 
	"email":"zhenjie@123.com" 
	} 
] 

主页面html

<input type="button" name="" id="btn" value="加载" />
<div class="panel">
</div>

 

© 著作权归作者所有

共有 人打赏支持
柴高八斗之父
粉丝 5
博文 200
码字总数 111898
作品 0
宁波
前端工程师
私信 提问
【原创】数组完整篇 / 基本操作/ 进阶 / 遍历 / 实例 / 拓展 / 取 / 赋

【基础】数组基本操作 数组的常见基本操作分为:赋值,查长度,添加push,删除delete,遍历for-in等。简单数组是一维的,但是实际工作中,数组总是与对象结合使用,叫:数组对象。 类型操作分...

柴高八斗之父
2017/08/29
0
0
前端框架开发指南

Dom是一款专门针对移动端的JS库,集成了大部分常用DOM操作API,你不需要学习任何新的东西,其用法和jQuery几乎是一样的。 创建一个Dom对象很简单只需通过 $ 对象即可 PS. 参数中带有 [ ] 的意...

369yun
2016/03/24
350
0
柯楠/ZendollarJS

ZendollarJS A New JavaScript Library 兼容性 Chrome Firefox Edge Safari 暂时不支持IE浏览器,此bug有待改善 使用方法 示例 $('#box').$(0).$('div').eq(0).$...

柯楠
2017/07/02
0
0
一个demo学会js

全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算法全...

luanpeng825485697
2017/08/04
0
0
jquery-ajax 获取json,遍历新闻到dom

【基本思路】 创建数据源,一个静态页html,内放json格式的新闻内容; 前端页面结构写好, ajax数据请求,转换json为obj对象,最后执行遍历循环取值。 效果图如下: 【主页面代码如下:】 【...

柴高八斗之父
2017/10/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql grant 用户权限总结

用户权限管理主要有以下作用: 1. 可以限制用户访问哪些库、哪些表 2. 可以限制用户对哪些表执行SELECT、CREATE、DELETE、DELETE、ALTER等操作 3. 可以限制用户登录的IP或域名 4. 可以限制用...

Airship
21分钟前
1
0
RabbitMQ学习(3)

1. 消费端 1. 消费端通过推模式或者拉模式从RabbitMQ中获取并消费消息,当消费者确认处理消息后,可以手动确认消息已被接收,然后就会将该消息从RabbitMQ的队列中标记再清除,消费者端还可以...

江左煤郎
32分钟前
1
0
linux mysql(5.7)开启慢查询

一、有3个配置需要设置, 1:相关开关 2:日志目录文件 3:慢查询的时间限制 二、设置完之后重启mysql service mariadb restart 三、重启后做个测试 连接mysql 并查询: select sleep(6); 四...

chro008
40分钟前
1
0
选择IDC机房、选择硬件、上架服务器、装系统

选择IDC机房 当业务量比较大的时候,往往选用IDC而不是公有云来跑业务。 IDC机房的服务一般分为两种 需要我们自己购买服务器和网络设备,托管到IDC机房。IDC机房会提供布线、巡检、硬件操作等...

李超小牛子
41分钟前
2
0
《傲慢与偏见》的读书笔记与读后感作文2400字

《傲慢与偏见》的读书笔记与读后感作文2400字: 作者:孙苑馨;笔者按:读书这个习惯是我爸妈养出来的。小时候父母赚的钱除了吃饭穿衣剩下的就是买书了,他们除了买各种新鲜出版的文艺派图书...

原创小博客
50分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部