（五）AJAX技术
一、定义
- 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技术的更多相关文章
- Ajax 技术一
一.Ajax概述 1.历史起源 1998年,微软公司Outlook Web Access研发小组在当时的IE浏览器中集成了一种技术,可以在客户端无刷新的前提下向服务器端发送Http请求,这门技术称之为 ...
- 14.javaweb AJAX技术详解
一.简介 1, ajax:在不重新加载网页的前提下,与服务器交换数据并更新部分网页的技巧,但其本身并不是一种新技术 2, 核心:XMLHttpRequest对象.AJAX技术主要是通过此对象完成的 ...
- ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动，还有从数据库中获得
今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术 即,AJAX是一个[局部刷新 ...
- Ajax技术---核心XMLHttpRequest对象
Ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. (一)ajax技术的意义 我 ...
- 使用ajax技术实现txt弹出在页面上
使用ajax技术实现txt弹出在页面上 使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...
- 《所用到的AJAX技术基础》
来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...
- Ajax技术
1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
- Ajax技术详解
Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载.Ajax的核心是JS的XMLHttpR ...
- Java之Ajax技术
ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...
- 在 PHP 中结合 Ajax 技术进行图片上传
前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...
随机推荐
- 在cmd运行窗口运行.py文件
步骤
- for,foreach,$.each()跳出循环的比较
说起跳出循环,第一时间想起的是 break \ continue,这是经典的for循环. 1.for 循环 先上例子,思考输出结果,体会 break 与 continue 的不同. 1 var arr ...
- CentOS7.x安装mariadb-10.3
1.配置mariadb yum源 vim /etc/yum.repos.d/mariadb.repo # 写入如下内容 [mariadb] name = MariaDB baseurl = http: ...
- Pthon操作Gitlab API----批量删除，创建，取消保护
1.需求:大批量的应用上线后合并到Master,其他的分支develop/test/uat等需要同步最新代码的操作. 2.操作:可以通过传参 ,列表 的方式把每个项目的id值填入,才能对相关项目进行批 ...
- （C99）复合字面量
#include <stdio.h> struct argvs { char a[64]; int b; }; int pfunc(struct argvs *a) { printf(&q ...
- python 操作excle 之第三方库 openpyxl学习
目录 python 操作excle 之第三方库 openpyxl学习 安装 pip install openpyxl 英文文档链接 : 点击这里~ 1,定位excel 2,读取excle中的内容 3, ...
- 黑魔法师之门 (magician)-并查集
题目 经过了 16 个工作日的紧张忙碌,未来的人类终于收集到了足够的能源.然而在与 Violet 星球的战争中,由于 Z 副官的愚蠢,地球的领袖 applepi 被邪恶的黑魔法师 Vani 囚禁在了 ...
- Mongo mongoexport/mongoimport介绍
一.Mongoexport导出数据 1,导出json数据 mongoexport -d db -c collection -o save-file.dat 2,导出CSV数据 mongoexport ...
- Linq找不到行或行已更改
1.发生这种情况第一时间是确认了database明明存在这条数据 2.然后确认了Linq查找的条件中是否有连接条件使得连续更新中发生变化 3.最后发现原来是Linq使用的表实际中有个field由not ...
- 【csp模拟赛九】--dfs3
这道题贪心错误:直接dfs就行,枚举新开一个还是往之前的里面塞 贪心代码(80): #include<cstdio> #include<algorithm> #include& ...