zoukankan      html  css  js  c++  java
  • jQuery 之二:Ajax加载Json数据

    直接上代码

    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>
  • 相关阅读:
    7-[CSS]-css介绍,引入方式
    6-[HTML]-标签属性
    5-[HTML]-body常用标签2
    4-[HTML]-body常用标签1
    3-[HTML]-head标签介绍
    2-[HTML]--介绍
    1-[前端]--前端内容介绍
    35
    33 -jQuery 属性操作,文档操作(未完成)
    1o xiaomi
  • 原文地址:https://www.cnblogs.com/zjwei55/p/2152610.html
Copyright © 2011-2022 走看看