利用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 相关文章推荐
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
原生js实现弹出层效果
Jan 20 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
Three.js实现雪糕地球的使用示例详解
Jul 07 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
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
Seajs的学习笔记
2014/03/04 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
python实现的文件夹清理程序分享
2014/11/22 Python
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python文本数据相似度的度量
2018/03/12 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
Python while true实现爬虫定时任务
2020/06/08 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
简单英文演讲稿
2014/01/01 职场文书
幼儿园新年寄语
2014/04/03 职场文书
教师业务培训方案
2014/05/01 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
工作能力自我评价2015
2015/03/05 职场文书
会议新闻稿
2015/07/17 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python