来自于《jquery权威指南》

--------------------------------------

点击button后,获取到json文件数据,显示如下:

Json文件:

[
{
"name":"王美丽",
"sex": "女",
"age":29
},
{
"name":"梁帅哥",
"sex": "男",
"age":30
}
]

index.html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery</title>
<style type="text/css">
body,div,ul,li,p{margin: 0;padding: 0; font-size: 13px;}
ul{list-style-type: none;}
.load{width: 230px;border: solid 1px #666;padding: 10px;background-color: orange;} </style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> $(function(){
$("#btn").click(function(){
var strHtml = "";
$.getJSON("a.json",function(data){
//alert("aaa");
$(".load").empty();
$.each(data, function(InfoIndex, Info){
strHtml += "姓名:" + Info['name'] + "<br />";
strHtml += "性别:" + Info['sex'] + "<br />";
strHtml += "年龄:" + Info['age'] + "<hr>";
});
$(".load").html(strHtml);//出了回调函数,strhtml似乎就为空?
}); });
}); </script>
</head>
<body>
<div class="load"></div>
<p><input type="button" id="btn" value="获取数据" /></p>
</body>
</html>

注意内容:

(1)$.getJSON 大小写问题;

(2)json数据格式书写正确。

jquery简单ajax示例_读取json文件数据的更多相关文章

  1. Unity 用C#脚本读取JSON文件数据

    读取JSON文件数据网上有很多方法吗,这里采用SimpleJSON,关于SimpleJSON的介绍参考以下链接:http://wiki.unity3d.com/index.php/SimpleJSON ...

  2. Android - 读取JSON文件数据

    Android读取JSON文件数据 JSON - JavaScript Object Notation 是一种存储和交换文本信息的语法. JSON对象在花括号中书写.用逗号来分隔值. JSON数组在方 ...

  3. IIS7.5支持解析读取.json文件数据

    在站点中添加 MIME类型去支持Json文件的解析 添加mime类型 文件扩展名:.json MIME类型:application/json 添加成功后即可. 如果不能直接操作iis也可以直接在web ...

  4. jQuery读取json文件,实现省市区/县(国标)三级联动

    最近做一个微信项目,需要用户填写所在的省市区/县,决定使用jQuery读取json文件来实现省市区/县的联动. 其实很简单,jQuery文档也有详细解释: 代码如下: html <table w ...

  5. jqery ajax读取json文件

    json文件数据 [ {"name":"哈哈··","email":"邮箱01","gender": ...

  6. jquery无法读取json文件问题

    jquery无法读取json文件,如:user.json文件无法读取.把user.json文件的后缀名修改为aspx,文件内容不变,则可以读取~ 原理不懂!~~

  7. 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据

    1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...

  8. Asp.Net MVC 读取json文件

    有些系统上面的配置可以做成config里面的appsetting.这里要求写在json文件里面. 首先 添加命名空间 using Newtonsoft.Json; using System.IO; u ...

  9. node-webkit读取json文件

    1.原理 node-webkit包含了node.js,node.js提供了处理json数据文件的方法,通过node.js提供的方法,我们可以比较方便地读取json文件. 2.示例 这里我们读取的文件是 ...

随机推荐

  1. couchdb的使用例子

    couchdb安装 sudo apt-get install erlang sudo apt-get install libmozjs185-dev libicu-dev 下载源码,编译安装 启动以后 ...

  2. POJ2739(尺取法)

    Sum of Consecutive Prime Numbers Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23931 ...

  3. 在Mac下配置php开发环境:Apache+php+MySql (卡在 给mysql 设置不了账号密码)

    https://my.oschina.net/joanfen/blog/171109#OSC_h4_3 cmd 进入mysql的方法

  4. cache的作用

    cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取. 如果使用jquery,可以使用 cache参数来控制 $.ajax({  url: " ...

  5. html5的canvas方法的总结

    canvas的方法 save()保存当前环境的状态 restore() 返回之前保存过的路径状态和属性 createEvent() getContext()返回一个对象,指出访问绘图功能必要的API ...

  6. 函数和object

    普通函数 在javascript中,函数是一等公民,函数在javascript是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用. 一.函数调用形式 函数调用形式是最常见的形式,也是 ...

  7. OD 实验(十六) - 从对话框入手对程序的逆向

    对话框: 对话框从类型上分为两类:modal 对话框和 modeless 对话框,就是模态对话框和非模态对话框,也有叫成模式和非模式 模态对话框不允许用户在不同窗口间进行切换,非模态对话框允许用户在不 ...

  8. 【转】Android Studio打包全攻略---从入门到精通

    原文地址:http://blog.csdn.net/zivensonice/article/details/51672846 初出茅庐 手动打包 怎么手动打包 项目写完了,现在需要把应用上传到市场,问 ...

  9. 第二章:Android Studio概述(二)[学习Android Studio汉化教程]

    The Main Menu Bar 主菜单栏  主菜单栏位于Android Studio的最上面,你几乎可以利用主菜单和其子菜单来执行任何操作.不像Android Studio中其他的一些菜单,主菜单 ...

  10. Tkinter PanedWindow

         Tkinter PanedWindow: 一个PanedWindow是一个容器部件可能包含任何数量的窗格,水平或垂直排列 一个PanedWindow是一个容器部件可能包含任何数量的窗格,水平 ...