一、定义

  • 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. DYNAMIC LINK LIBRARY - DLL

    https://www.tenouk.com/ModuleBB.html MODULE BB DYNAMIC LINK LIBRARY - DLL Part 1: STORY What do we h ...

  2. BZOJ2155(?) R集合 （卡特兰数）

    Orz Freopen大佬 CODE fac = [0]*1005 def C(n, m): return fac[n] // fac[m] // fac[n-m] n = int(input()) ...

  3. POJ-2115-C Looooops(线性同余方程）

    链接: https://vjudge.net/problem/POJ-2115 题意: A Compiler Mystery: We are given a C-language style for ...

  4. Dao的扩展

    题目: 1.查询所有学生记录,包含年级名称2.查询S1年级下的学生记录 一.项目目录 package com.myschool.entity; import java.util.ArrayList; ...

  5. 爬虫（九）：scrapy框架回顾

    scrapy文档 一:安装scrapy a. pip3 install wheel b. 下载twisted http://www.lfd.uci.edu/~gohlke/pythonlibs/#tw ...

  6. 从零开始实现SSD目标检测（pytorch）（一）

    目录 从零开始实现SSD目标检测(pytorch) 第一章 相关概念概述 1.1 检测框表示 1.2 交并比 第二章 基础网络 2.1 基础网络 2.2 附加网络 第三章 先验框设计 3.1 引言 3 ...

  7. 禁止打印调用（python）

    原文 : https://cloud.tencent.com/developer/ask/188486 import os, sys class HiddenPrints: def __enter__ ...

  8. zabbix主动模式,自定义Key监控 zabbix采集器

    主动模式不是只能用模板提供的标准检测器方式 zabbix-agent两种运行方式即主动模式和被动模式.默认被动模式. 两种模式是相对 客户端 角度来说的. 被动模式:等待server来取数据,可以使用 ...

  9. geometry_msgs/PoseStamped 类型的变量的构造

    #navpoint.msg geometry_msgs/PoseStamped target_pose uint8 floor uint8 type target_pose 的类型为geometry_ ...

  10. 【SPOJ】Distinct Substrings

    [SPOJ]Distinct Substrings 求不同子串数量 统计每个点有效的字符串数量(第一次出现的) \(\sum\limits_{now=1}^{nod}now.longest-paren ...