摘自

Ajax获取 Json文件提取数据

1. json文件内容(item.json)

[
{
"name":"张国立",
"sex":"男",
"email":"zhangguoli@123.com",
"url":"./img/1.jpg"
},
{
"name":"张铁林",
"sex":"男",
"email":"zhangtieli@123.com",
"url":"./img/2.jpg"
},
{
"name":"邓婕",
"sex":"女",
"email":"zhenjie@123.com",
"url":"./img/3.jpg"
},
{
"name":"张国立",
"sex":"男",
"email":"zhangguoli@123.com",
"url":"./img/4.jpg"
},
{
"name":"张铁林",
"sex":"男",
"email":"zhangtieli@123.com",
"url":"./img/5.jpg"
},
{
"name":"邓婕",
"sex":"女",
"email":"zhenjie@123.com",
"url":"./img/6.jpg"
}
]

  2.发送Ajax请求,获取Json数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style type="text/css"> .p1{
font-size: 14px;
color: #000;
}
.p2{
font-size: 12px;
color: #b0b0b0;
}
.p3{
font-size: 14px;
color: #ff5f19;
}
.product{
width:100%;
position: relative;
margin: 20px 0 5px 0;
height: 100px;
background: #fafafa;
} .img{
width: 100px;
height: 100px;
float: left;
margin-right: 20px;
}
.p{
display:inline-block;
float:left;
width:50%;
margin-top:6px;
font-family: Microsoft YaHei;
}
.p1{
margin-top:16px;
} </style>
<script>
//页面加载 获取全部信息
$(function(){
$.ajax({
type: "POST",//请求方式
url: "item.json",//地址,就是json文件的请求路径
dataType: "json",//数据类型可以为 text xml json script jsonp
          success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
addBox(result);
}
});
/*$.get("item.json",function(result){
//result数据添加到box容器中;
addBox(result);
});*/
});
function addBox(result){
//result是一个集合,所以需要先遍历
$.each(result,function(index,obj){
$("#box").append("<div class='product'>"+//获得图片地址
"<div><img class='img' src="+obj['url']+"/></div>"+
//获得名字
"<div class='p1 p'>"+obj['name']+"</div>"+
//获得性别
"<div class='p2 p'>"+obj['sex']+"</div>"+
//获得邮箱地址
"<div class='p3 p'>"+obj['email']+"</div>"+
"</div>");
});
}
</script>
</head>
<body>
<!-- 构建装一个容器 -->
<div id="box">
</div>
</body>
</html>

  3.运行效果

4.文件结构

Ajax获取 Json文件提取数据的更多相关文章

  1. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

  2. 【c++基础】从json文件提取数据

    前言 标注数据导出文件是json格式的,也就是python的dict格式,需要读取标注结果,可以使用c++或者python,本文使用c++实现的. JsonCpp简介 JsonCpp是一种轻量级的数据 ...

  3. jquery ajax 获取 json 文件数据

    [ {"name":"project1"}, {"name":"project2"}, {"name" ...

  4. AJAX获取JSON形式的数据

    test.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. AngularJS学习笔记(3)——通过Ajax获取JSON数据

    通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...

  6. jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...

  7. ajax获取json数据 for select2

    json数据“a.json” [ { "id": "1", "text": "张三" }, { "id&quo ...

  8. qt qml ajax 获取 json 天气数据示例

    依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...

  9. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

随机推荐

  1. python中文编码&json中文输出问题

    python2.x版本的字符编码有时让人很头疼,遇到问题,网上方法可以解决错误,但对原理还是一知半解,本文主要介绍 python 中字符串处理的原理,附带解决 json 文件输出时,显示中文而非 un ...

  2. 【代码笔记】Web-JavaScript-JavaScript输出

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. OSGI企业应用开发(十四)整合Spring、Mybatis、Spring MVC

    作为一个企业级的Web应用,MVC框架是必不可少的.Spring MVC目前使用也比较广泛,本文就来介绍一下如何在OSGI应用中实现Spring.Mybatis.Spring MVC框架的整合,其中S ...

  4. Ubuntu 16.04.4 LTS + Ambari 2.6.1.5 + HDP 2.6.4.0 安装部署

    服务器 主机名 master slave1 slave2 slave3 IP 192.168.1.40 192.168.1.41 192.168.1.42 192.168.1.43 离线包服务器: 1 ...

  5. Android View体系(五)从源码解析View的事件分发机制

    1.处理点击事件的方法 View的层级 我们知道View的结构是树形的结构,View可以放在ViewGroup中,这个ViewGroup也可以放到另一个ViewGroup中,这样层层的嵌套就组成了Vi ...

  6. 第五章 绘图基础(BEZIER)

    /*----------------------------- BEZIER.C -- Bezier Splines Demo (c) Charles Petzold, 1998 ---------- ...

  7. My strength (C-A-R)

    My strength: I am good at problem resolving Challenge In the first year when I come to America I pas ...

  8. Django电商项目---完成商品主页显示day2

    利用DjangoAdmin初始化数据库 创建项目 python manage.py startapp df_goods 添加配置 manas/urls.py manas/settings.py 新创建 ...

  9. LInux下(centos7.2)更新 python3.7

    进入超级管理员目录  su root 下载 wget https://www.python.org/ftp/python/3.7.0/Python-3.7.0.tgz 找到下载的文件解压  tar - ...

  10. Ulua对象管理方式

    不管是C++中还是在C#中,在都绕不开一个问题:类对象怎么在Lua中使用的问题,还好Lua提供了Userdata以及ligh Userdata结构类型,通过扩展可以处理这方面的问题.现在的很多框架也大 ...