一、定义

  • AJAX 是一种用于创建快速动态网页的技术。
  • 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  • 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。


<script type="text/javascript" src="./js/lib/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){show();});
});
function show(){
$.getJSON("./source/student.json",function(stu){           //在“./source/student.json”
        //地址里找到文件,然后调用函数,stu为这个文件对象 $("#tab").empty();                //防止多次刷新出现重复值,即每次点击按钮之后会先清空表格里的内容
$('#tab').append("<tr><td>"+stu.name+"</td><td>"+stu.age+"</td></tr>");
});
}
</script>
</head>
<body>
<button>点我刷新数据</button>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
<table style="border-style:solid;width:150px;height:20px;" id="tab"> <tr>
<td></td>
<td></td>
</tr>
</table>
</body>

  

student.json:

    {"name":"张三","age":"15"}

结果:


ps:如果json文件里只有一个对象,即{“name”:"张三","age","15"} 则不用each循环即可获取数据,即

function(stu){//stu.name,stu.age取值}

如果是json文件里有不止一个对象,即【{“name”:"张三","age","15"},{“name”:"李四","age","16"}】

注意一定要加大括号,一定要用each循环才能读取数据,如果只有一个对象加了大括号也被当成多个对象。

<script type="text/javascript" src="./js/lib/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){show();});
});
function show(){
$.getJSON("./source/student.json",function(stu){ //在“./source/student.json” $("#tab").empty();
$.each(stu,function(i,n){
$('#tab').append("<tr><td>"+n.name+"</td><td>"+n.age+"</td></tr>"); }); });
}
</script>
</head>
<body>
<button>点我刷新数据</button>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
<table style="border-style:solid;width:150px;height:20px;" id="tab"> <tr>
<td></td>
<td></td>
</tr>
</table>
</body>

结果:

(五)AJAX技术的更多相关文章

  1. Ajax 技术一

    一.Ajax概述 1.历史起源 1998年,微软公司Outlook Web Access研发小组在当时的IE浏览器中集成了一种技术,可以在客户端无刷新的前提下向服务器端发送Http请求,这门技术称之为 ...

  2. 14.javaweb AJAX技术详解

    一.简介 1,  ajax:在不重新加载网页的前提下,与服务器交换数据并更新部分网页的技巧,但其本身并不是一种新技术 2,  核心:XMLHttpRequest对象.AJAX技术主要是通过此对象完成的 ...

  3. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动,还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  4. Ajax技术---核心XMLHttpRequest对象

    Ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. (一)ajax技术的意义 我 ...

  5. 使用ajax技术实现txt弹出在页面上

    使用ajax技术实现txt弹出在页面上   使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...

  6. 《所用到的AJAX技术基础》

    来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...

  7. Ajax技术

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

  8. Ajax技术详解

    Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载.Ajax的核心是JS的XMLHttpR ...

  9. Java之Ajax技术

    ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...

  10. 在 PHP 中结合 Ajax 技术进行图片上传

    前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...

随机推荐

  1. Nginx入门(二)——双机热备

    upstream backend { server ; server backup; } server { listen ; server_name localhost; #charset koi8- ...

  2. "=="和equals小结

    通俗点讲,==是看看左右是不是一个东西.equals是看看左右是不是长得一样.如何记住嘛.如果单纯是想记住,  ==:等于.equals:相同.两个长得一样的人,只能说长的相同(equals),但是不 ...

  3. 1. vue如何实现双向数据绑定

  4. 「数据结构与算法之链表(Python)」(四)

    什么是链表 顺序表的储存分为一体式结构和分离式结构,但总的来说存储数据的内存是一块连续的单元,每次申请前都要预估所需要的内存空间大小.这样就不能随意的增加我们需要的数据了.链接就是为了解决这个问题.它 ...

  5. 字符编码,python解释器------总结

    目录 1. 编码: 1.字符编码 2. 编码的历史 3. 编码和解码 2. python解释器 解释代码的流程 1. 读取文本到解释器 2. 识别代码(检查语法问题) 3. 往终端打印 1. 编码: ...

  6. ashx 图片上传

    为了方便多出调用图片上传方法       首先我们将图片上传方法抽离出来 创建ashx 一个新的方法 using System; using System.Collections.Generic; u ...

  7. About & Ideas & Queries

    About Blog主现高一,文化课和OI啥都不会 本Blog主太懒,所以很多内容都缩在一个文章里,如数学.图论大礼包 https://wenku.baidu.com/view/56d76029647 ...

  8. 【原创】go语言学习(十六)接口

    目录 接口介绍与定义 空接口和类型断言 指针接收和值接收区别 接口嵌套 接口介绍与定义 1. 接口定义了一个对象的行为规范 A. 只定义规范,不实现B. 具体的对象需要实现规范的细节 2.Go中接口定 ...

  9. ROS与树莓派的结合

    从零开始学树莓派和ROS 今天写下自己的第一篇博客,记录一下自己的学习历程和学习过程中碰到的各种小问题,供同道者参阅和自己以后回顾用 ,水平不高,我就放开手写吧,反正也不会有人看. 我现在在做毕业设计 ...

  10. ubuntu16.04安装matlab_R2018a/R2017a

    ubuntu16.04安装matlab_R2018a/R2017a 1. 文件准备 我把Matlab2018a安装镜像及破解文件放在了/home/haes/Downloads/matlab下 2.挂载 ...