一、定义

  • 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. webpack中配置babel时遇到的问题

    1.Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/cor ...

  2. java继承（implements与extends）总结

       版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/weixin_39938767/article/details/80056922 关键字impl ...

  3. javascript权威指南第15章 使用Canvas绘图

    HTML <!DOCTYPE html> <html> <head> <title>canvas</title> </head> ...

  4. Time 时间格式处理方法

    一般时间调用都会精确到年   月  日    时  分 秒 怎么调用时去掉时  分 秒呢 用以下格式来处理 //时间格式处理 var time = new Date(data.FTime); var ...

  5. (RE) luogu P3690 【模板】Link Cut Tree

    二次联通门 : luogu P3690 [模板]Link Cut Tree 莫名RE第8个点....如果有dalao帮忙查错的话万分感激 #include <cstdio> #includ ...

  6. 在vultr中安装k8s测试

    vultr 安装k8s *** 如果国内访问 k8s.gcr.io 很慢,或者无法访问 *** 在应用yaml文件创建资源时,将文件中镜像地址进行内容替换即可: 将k8s.gcr.io替换为 regi ...

  7. codeforces#1120C. Compress String（dp+后缀自动机）

    题目链接: https://codeforces.com/contest/1120/problem/C 题意: 从前往后压缩一段字符串 有两种操作: 1.对于单个字符,压缩它花费$a$ 2.对于末尾一 ...

  8. xiugai grub

    https://wiki.gentoo.org/wiki/Flicker_Free_Boot#Getting_the_custom_version_of_grub

  9. LogStash安装使用

    1.下载LogStash的rpm包: wget https://artifacts.elastic.co/downloads/logstash/logstash-7.4.2.rpm 2. 安装elas ...

  10. 【python代码】linux 登陆网关

    #!/usr/bin/env python import urllib2 url="http://10.3.8.211" data="DDDDD=2010111222&a ...