jQuery 之二:Ajax加载Json数据
2011-08-24 22:30
363 查看
直接上代码
1 json数据
2 css
3 html
4 javascript
1 json数据
[ { "username": "张三", "content": "沙发." }, { "username": "李四", "content": "板凳." }, { "username": "王五", "content": "地板." } ]
2 css
<style> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style>
3 html
<body> <br/> <p> <input type="button" id="send" value="加载"/> </p> <div class="comment">已有评论:</div> <div id="resText" > </div> </body>
4 javascript
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script> $(function(){ $('#send').click(function() { $.getJSON('test.json', function(data) { $('#resText').empty(); var html = ''; $.each( data , function(commentIndex, comment) { html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }) $('#resText').html(html); }) }) }) </script>
相关文章推荐
- IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取
- JSTree--JSON--AJAX动态加载JSON数据
- ajax动态加载json数据并详细解析
- 爬虫 AJAX加载数据(JSON)
- ajax加载不了json数据的集中错误
- 解决Ajax加载JSon数据中文乱码问题
- 重温之Struts与Ajax结合向前台传送json数据实现ztree(一次性加载ztree)
- 《AJAX学习心得分享-------(三)AJAX+JSON无刷新加载大量后台数据》
- jqPlot图表插件学习之ajax-json数据加载
- 做了MVC模式一年,可不要把传统模式忘记呀!ashx配合aspx实现AJAX加载JSON数据
- json对象load到表单中,这样后台Ajax过来的数据就可以直接加载
- ajax动态加载json数据并解析
- ajax异步加载解析复杂json(集合中包含对象,对象中包含对象)数据
- [转]IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取
- MVC学习系列6--使用Ajax加载分部视图和Json格式的数据
- 《AJAX学习心得分享-------(三)AJAX+JSON无刷新加载大量后台数据》
- ztree通过ajax加载json数据中文乱码的解决方法:springmvc配置
- js加载Json数组实现ajax加载动态页面数据
- jsTree ajax 获取json数据加载树
- 滑轮滚动到页面底部ajax加载数据配合json实现