文档章节

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

柴高八斗之父
 柴高八斗之父
发布于 2017/09/08 19:36
字数 223
阅读 20
收藏 1
点赞 0
评论 0

先看效果截图:

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>

 

© 著作权归作者所有

共有 人打赏支持
柴高八斗之父
粉丝 4
博文 172
码字总数 86354
作品 0
宁波
前端工程师
前端框架开发指南

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

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

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

柯楠
2017/07/02
0
0
前后端数据交互方法总结

前后端数据交互方法 在此介绍几种常用的前后端数据交互方法,并给出使用建议。以提高前后端协同开发的效率。 目录: HTML赋值 JS赋值 script填充JSON AJAX获取JSON WebSocket实时传输数据 总结...

303Donatello
2017/11/21
0
0
一个demo学会js

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

luanpeng825485697
2017/08/04
0
0
聊一聊前端模板与渲染那些事儿

欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码): http://my.oschina.net/MrHou/blog?catalog=477313&temp=1466755903794 1 页面级的渲染...

侯禹
2016/07/02
655
0
Zepto.js简介(第二章)

接着上章的继续记录。 zepto 特点: 1、体积8kb 2、针对移动端的框架 3、语法同jquery大部分一样,都是$为核心函数 4、目前功能完善的框架体积最小的左右 zepto同jquery不同的API attr同pro...

张靖bibibi
06/22
0
0
几个常用的 JavaScript 框架比较

JavaScript 是面向对象的脚本语言,长期以来用作 Web 浏览器应用程序的客户端脚本接口。JavaScript 让 Web 开发人员能以编程方式处理 Web 页面上的对象,并提供了一个能够动态操作这些对象的...

红薯
2010/05/05
11.5K
5
Ajax跨域问题研究笔记

作者:fbysss msn:jameslastchina@hotmail.com blog:blog.csdn.net/fbysss 声明:本文由fbysss原创,转载请注明出处 关键字:Ajax跨域 一.试验准备 修改c:/windows/system32/drivers/etc/hos...

长平狐
2012/10/17
261
0
DataTables+BootStrap组合Ajax数据使用方法(排序,过滤,分页等)

Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。 主要功能 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器...

Simon_ITer
2016/11/08
1K
5
Java程序员从笨鸟到菜鸟之(八十九)跟我学jquery(五)jquery中的ajax详解

Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统...

长平狐
2012/11/12
195
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Centos7通过yum安装nginx

添加源地址(直接install可能不是最新版本的) sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm 安装 sudo yum install -y ng......

iplusx
7分钟前
0
0
ef .core Dapper Helper

using System; using System.Collections.Generic; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Threading.Tasks; using Dapper; using Dap......

Lytf
9分钟前
0
0
iOS 小笔记

1.以下代码打印什么     __block int val = 10;    void (^blk)(void) = ^{        printf("val=%d\n",val);        };       val = 2;    blk(); /...

风了个1
11分钟前
0
0
【Spring Boot 系列 Spring Boot示例程序】

入门程序步骤,创建一个Maven项目。继承Spring Boot官方提供的父工程。再引入一个Web的应用启动器。 1、选择一个合适的IDEA工具 创建一个Maven工程,并添加如下配置 <parent> <...

HansonReal
12分钟前
0
0
217. Contains Duplicate - LeetCode

Question 217. Contains Duplicate Solution 题目大意:判断数组中是否有重复元素 思路:构造一个set,不重复就加进去,重复返回true,如果数据量大的话,可以用布隆过滤器 Java实现: publ...

yysue
17分钟前
0
0
istio 处理失败 (理论)

Envoy提供了一套开箱即用的选择加入故障恢复功能,可以通过应用程序中的服务进行利用。功能包括: 超时 具有超时预算和重试之间的可变抖动的有界重试 限制并发连接数和对上游服务的请求 对负...

xiaomin0322
18分钟前
0
0
eclipse解决git冲突举例

本地修改了两个文件,提交时提示有冲突,想来应该是没有从远程仓库下载最新代码导致的。通过右击项目 -> Team -> Sychronized WorkSpace,比较本地仓库和远程仓库的异同:   此时没有更好的...

Code辉
26分钟前
0
0
运行.jar后缀的文件

前提必须安装了jdk,正确配置环境变量。 在dos窗口执行以下命令即可。 java -jar C:\Users\10492\Desktop\turn.jar

haha360
29分钟前
0
0
Java程序员如何做代码压力测试?【JWordPress前台项目实战】

代码 pom.xml文件引入包 <dependency><groupId>com.taobao.stresstester</groupId><artifactId>stresstester</artifactId><version>1.0</version></dependency> 编写测试代码 /**......

迷你芊宝宝
33分钟前
0
0
面试宝典-什么是缓存穿透?

缓存穿透是说收到了一个请求,但是该请求缓存里没有,只能去数据库里查询,然后放进缓存。 这里面有两个风险,一个是同时有好多请求访问同一个数据,然后业务系统把这些请求全发到了数据库;...

suyain
39分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部