一、定义

  • 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. Kafka 基本知识分享

    目录 一.基本术语 二.Kafka 基本命令 三.易混淆概念 四.Kafka的特性 五.Kafka的使用场景 六.Kakfa 的设计思想 七.Kafka 配置文件设置 八.新消费者 九.Kafka该怎 ...

  2. [NOI2005]月下柠檬树

    题意 F.A.Qs Home Discuss ProblemSet Status Ranklist Contest 入门OJ ModifyUser  autoint Logout 捐赠本站 Probl ...

  3. machine learning(12) -- classification: One-vs-all classfication

    Multiclass classification例子: 邮箱的邮件的分类: 工作邮件,私人邮件,朋友的邮件,兴趣爱好的邮件 医学诊断: 没有生病,患有流感,患有普通感冒 天气: 晴天,兩,多云等 O ...

  4. 你应该知道的16个linux命令

    Linux常用命令很多比如cd.ls.pwd.du.df.tail.head.yum.mv.touch.mkdir.cp.tar等,根据工作内容不同,经常使用的命令也不同,比如运维人员使用tail.h ...

  5. 使用jQuery快速高效制作网页交互特效----jQuery中的事件与动画

    jQuery中的事件 和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现. 事件在元素对象与功能代码中起着重要的桥梁作用. 在JQuery中,事件 ...

  6. P3410 拍照

    漂亮小姐姐点击就送:https://www.luogu.org/problemnew/show/P3410 题目描述 小B有n个下属,现小B要带着一些下属让别人拍照. 有m个人,每个人都愿意付给小B一 ...

  7. 【02NOIP提高组】均分纸牌

    #include<bits/stdc++.h> using namespace std; ; int n,sum,a[maxn]; int main() { ; cin>>n; ...

  8. mac 安装 mysql 5.7

    下载 https://dev.mysql.com/downloads/mysql/5.7.html#downloads 下一步,经过一系列安装步骤后,会跳出一个这样的界面,请注意!!! 上面红框中是你 ...

  9. C++中的平方、开方、绝对值怎么计算

    #include <math.h> //平方 pow() ,);// 4的平方=16 //开方 ,0.5);// 4的平方根=2 );// 4的平方根=2 //整数绝对值 int c = ...

  10. [mysql] Mysql数据分组GROUP BY 和HAVING，与WHERE组合使用

    理解分组,可以这样:对GROUP BY子句后面跟随的列名进行分组,然后对每一个分组而不是整个表进行操作. 举例:在产品表中,检索每一个供应商提供的商品的数量. mysql> SELECT ven ...