首先建立json.txt文件

{

"programmers": [

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },

{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },

{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }

],

"authors": [

{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },

{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },

{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }

],

"musicians": [

{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },

{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }

]

}

通过异步调用，来读取json数据

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<script type="text/javascript">

var xmlHttp;

function createXMLHttpRequest()

{

    if(window.ActiveXObject)

    {

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    else if(window.XMLHttpRequest)

    {

        xmlHttp = new XMLHttpRequest();

    }

}

function startRequest()

{

    createXMLHttpRequest();

    try

    {

        xmlHttp.onreadystatechange = handleStateChange;

        xmlHttp.open("GET", "Json.txt", true);

        xmlHttp.send(null);

    }

    catch(exception)

    {

        alert("xmlHttp Fail");

    }

}

function handleStateChange()

{

    if(xmlHttp.readyState == 4)

    {

        if (xmlHttp.status == 200 || xmlHttp.status == 0)

        {

            var result = xmlHttp.responseText;

            var json = eval("(" + result + ")");

            alert(json.programmers[0].firstName);//读取json数据

            //alert(json.sex);

        }

    }

}

</script>

</head>

<body>

    <div>

        <input type="button" value="AjaxTest" onclick="startRequest();" />

    </div>

</body>

</html>

ajax读取json数据的更多相关文章

  1. js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）

    js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可) 一.总结 ajax读取json和读取普通文本,和获 ...

  2. ajax(读取json数据)

    ajax知识点: 语法:$.ajax(路由,请求方式,返回的数据类型,数据参数,回调函数) url: "路由", type:"",默认get请求(get或pos ...

  3. js读取json数据（php传值给js）

    <?php $array =array('fds','fdsa','fdsafasd');  // json_encode($array); ?> <html> <hea ...

  4. 通过JQuery的$.ajax()把 json 数据 post 给 PHP

    通过JQuery的$.ajax()把 json 数据 post 给 PHP时的几种情况: 无法在PHP中通过$_POST 以及 $_REQUEST 获取json数据,即 $json = $_POST[ ...

  5. 关于跨域读取json数据我的理解

    这两天在做关于读取json数据的插件,想用getJSON读取数据: $.getJSON(http://www.xxxx.com/Titles.js, function (data) { console ...

  6. JS-利用ajax获取json数据，并传入页面生成动态tab

    封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...

  7. json数据的格式，JavaScript、jQuery读取json数据

    JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON的特点: JSON 是纯文本 JSON 具有“自我描述性”(人类可读) JSON 具有层级 ...

  8. ajax 发送json数据时为什么需要设置contentType: "application/json”

    1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别? contentType: "application/j ...

  9. ajax发送json数据时为什么需要设置contentType: "application/json”

    1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别?contentType: "application/js ...

随机推荐

  1. Project Euler 109 ：Darts 飞镖

    Darts In the game of darts a player throws three darts at a target board which is split into twenty ...

  2. ruby libmysqlclient.18.dylib

    在mac 的rails环境中,如果已经确定安装了 mysql server,但是在启动rails s (服务器)的时候出现  Library not loaded: libmysqlclient.18 ...

  3. Java多线程-线程的调度(守护线程)

    本文转自http://www.cnblogs.com/linjiqin/p/3210004.html 感谢作者 守护线程与普通线程写法上基本没啥区别,调用线程对象的方法setDaemon(true), ...

  4. Swift 使用CollectionView 实现图片轮播封装就是这样简单

    前言: 这篇你可以学会自定义视图,创建collectionView,协议的使用,定时器; 自制图片 先上Demo:Github上封装好的下载即用, 好用请Star Thanks首先新建一个继承于UIV ...

  5. http://my.oschina.net/pangyangyang/blog/144495

    http://my.oschina.net/pangyangyang/blog/144495

  6. sqlite3加密支持

    sqlite3加密支持 sqlite3免费版并不支持加密,不过留有接口,有不少开源的加密实现,不过有的需要使用openssl配置略显繁琐,不过使用wxsqlite比较方便. wxSqlite3 wxS ...

  7. iScrolljs 模拟android相册

    var showBigImage = new iScroll('showBigImage', { snap: 'div', snapThreshold: 480, momentum: false, z ...

  8. Json工具类 - JsonUtils.java

    Json工具类,提供Json与对象之间的转换. 源码如下:(点击下载 - JsonUtils.java . gson-2.2.4.jar ) import java.lang.reflect.Type ...

  9. hihoCoder 1051补提交卡（贪心 枚举）

    http://hihocoder.com/problemset/problem/1051 既然要选择最长连续提交天数,那么提交卡必须连续使用才有可能得到最优解,这样贪心,然后从头到尾扫一遍求出最大值. ...

  10. leetcode：Add Two Numbers

    题目描述:You are given two linked lists representing two non-negative numbers. The digits are stored in ...