一、定义

  • 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. 0021SpringMVC环境搭建及入门程序编写

    环境搭建: 1.创建项目 创建maven项目,勾选上Create from archetype,然后选中webapp再点击下一步,如下图: 解决项目创建过慢问题: 在创建maven项目过程中加入一组键 ...

  2. 应用程序域 System.AppDomain,动态加载程序集

    一.概述 使用.NET建立的可执行程序 *.exe,并没有直接承载到进程当中,而是承载到应用程序域(AppDomain)当中.在一个进程中可以包含多个应用程序域,一个应用程序域可以装载一个可执行程序( ...

  3. CentOS7.x安装mariadb-10.3

    1.配置mariadb yum源 vim /etc/yum.repos.d/mariadb.repo # 写入如下内容 [mariadb] name = MariaDB baseurl = http: ...

  4. nginx 作用，初认识

    访问网站的dns域名解析 1.浏览器缓存之前解析的域名对应的ip 2.在本机host文件中配置的域名与ip对应的地址 3.最后都没映射,指向的域名的万网服务器,拿到真实域名对应的ip. nginx 作 ...

  5. LeetCode 282. Expression Add Operators

    原题链接在这里:https://leetcode.com/problems/expression-add-operators/ 题目: Given a string that contains onl ...

  6. white-space

    white-space 语法: white-space:normal | pre | nowrap | pre-wrap | pre-line 默认值:normal 适用于:所有元素 继承性:有 动画 ...

  7. React应用数据传递的方式

    1. props属性 典型的React应用,数据通过props按照自上而下(父->子)的顺序传递数据. 2. Context传值 1. 应用场景 对于一些应用中全局性的属性(如UI主题.语言.登 ...

  8. loj #2316

    最短路 + 记忆化 记忆化搜索更容易实现 #include <iostream> #include <cstdio> #include <algorithm> #i ...

  9. P2637 第一次，第二次，成交！

    题目描述 因为奶牛们的节食运动(奶牛还节食?)给农夫JOHN余下了一大批干草无法处理,所以他准备要开一个拍卖会去出售他的干草.他有N(1<=N<=1000)批干草(每批大约100捆).他的 ...

  10. django项目部署上线 nginx + uwsgi

    一.安装python3 安装步骤:https://www.cnblogs.com/zhangqigao/p/11661875.html 二.修改django中的配置文件 修改settings.py ( ...