利用js读取动态网站从服务器端返回的数据


Posted in Javascript onFebruary 10, 2014

在html中利用js读取动态网站从服务器端返回的数据进行显示

1、js.html 页面

需要引入 执行jquery的js文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script src="jquery-1.8.2.min.js"></script> <script> 
$(function(){ 
//$("#loaddata").click(function(){ 
$(document).ready(function(){ 
//使用getJSON方法读取json数据, 
//注意:info.json可以是不同类型文件,只要其中的数据为json类型即可 
$.getJSON('info.json',function(data){ 
var html = ''; 
$.each(data,function(i,item){ 
html += '<tr><td>'+item['name']+'</td>'+ 
'<td>'+item['sex']+'</td>'+ 
'<td>'+item.address+'</td>'+ 
'<td>'+item['home']+'</td></tr>'; 
}); 
$('#title').after(html); 
//after方法:在每个匹配的元素之后插入内容。 
}); 
}); 
}); 
//注:可以是item.address,也可以是item['address'] 
//firefox报 json文件中 “语法错误 [”,单能加载数据 
//ie chrome 无法加载数据 
</script> 
</HEAD> 
<input type="button" value="加载数据" id="loaddata" /> 
<BODY> 
<table id="infotable" > 
<tr id="title"><th>姓名</th><th>性别</th><th>地址</th><th>主页</th></tr> 
</table> 
</BODY> 
</HTML>

info.json文件
[ 
{ 
"name":"zhangsan", 
"sex":"man", 
"address":"hangzhou", 
"home":"http://www.zhangsan.com" 
}, 
{ 
"name":"lisi", 
"sex":"wumen", 
"address":"beijing", 
"home":"http://www.lisi.coms" 
} 
]

应用场景 :

定期从数据库中读取的特定记录放到静态页面上去展示,为了减少对数据库访问的压力,把特定记录数取出来存放在json中,页面访问链接不用实时请求数据库。

至此可以将json中的内容加载到html静态也中去。

显示不了中文的确是编码问题,默认保存的json肯定是个记事本,然后改后缀名为json的,记事本默认编码是ANSI的 显示中文自然有问题,

解决方法:打开.json文件 文件 - 另存为 看到下面编码格式了吧 选择UTF-8 就可以了。

这里还有个容易出错的地方:
请求json文件报405错误,明明路径对的 但是还是报错。
解决方法:修改请求方式为get请求:

Javascript 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
UserData用法总结 lanyu出品
Jul 01 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
Javascript动画效果(2)
Oct 11 Javascript
JS中Array数组学习总结
Jan 18 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
详解vue高级特性
Jun 09 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 #Javascript
js判断undefined类型示例代码
Feb 10 #Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 #Javascript
js网页实时倒计时精确到秒级
Feb 10 #Javascript
js格式化时间和js格式化时间戳示例
Feb 10 #Javascript
javaScript 页面自动加载事件详解
Feb 10 #Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 #Javascript
You might like
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
php搜索文件程序分享
2015/10/30 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
django-allauth入门学习和使用详解
2019/07/03 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
优秀大学生职业生涯规划书
2014/02/27 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
授权委托书范本
2014/04/03 职场文书
个人向公司借款协议书
2014/10/09 职场文书
2014年话务员工作总结
2014/11/19 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
护士2015年终工作总结
2015/04/29 职场文书
政协工作总结2015
2015/05/20 职场文书
新闻稿格式范文
2015/07/18 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS