zoukankan      html  css  js  c++  java
  • 模拟ajax中success函数获取数据,并且渲染

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>jQuery渲染数据练习</title>
    </head>
    <body>
    <ul class="itemBox" id="itemBox">
    <!-- 初始模版 -->
    <!-- <li class="item">
    <h3>姓名:</h3>
    <h4>性别</h4>
    <h4>城市:</h4>
    <h4>年龄:</h4>
    </li> -->
    </ul>

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">

    // 这是模拟的数据
    var data = [
    {name: '小明', age: 12, sex: '男', city: '西安'},
    {name: '小王', age: 34, sex: '女', city: '榆林'},
    {name: '小张', age: 45, sex: '男', city: '宝鸡'},
    {name: '小李', age: 17, sex: '女', city: '咸阳'},
    {name: '小赵', age: 11, sex: '女', city: '山西'},
    {name: '小孙', age: 2, sex: '男', city: '湖南'},
    ];

    // 这是模拟的处理数据的函数
    function success(data) {
    // 对数据进行判断,若数据存在
    if(data) {

    // 遍历数据
    data.forEach(function (v) { // 这里可以换为箭头函数,注意兼容性
    console.log(v)
    // 创建元素的模版并拼接数据
    // es5的写法,帮你注释了
    // var str = '<li class="item"><h3>姓名:'+ v.name +'</h3><h4>性别:'+ v.sex +'</h4><h4>城市:'+ v.city +'</h4><h4>年龄:' + v.age + '</h4></li>';

    // es6的写法
    var str = `<li class="item">
    <h3>姓名:${v.name}</h3>
    <h4>性别:${v.sex}</h4>
    <h4>城市:${v.city}</h4>
    <h4>年龄:${v.age}</h4>
    </li>`;

    // 创建元素
    var oLi = $(str);
    // // 可以在这绑定事件,添加样式等操作,也可以事件委托交给父元素(推荐)
    oLi.on('click', () => {
    alert('你点击了元素');
    });
    // 添加到页面
    $('#itemBox').append(oLi)



    //或者这样一次到位,不用创建中间变量
    // $('#itemBox').append(`<h3>${v.name}</h3>`);

    });
    } else {
    alert('数据加载失败');
    }
    }


    // 模拟调用过程
    success(data);

    </script>
    </body>
    </html>
  • 相关阅读:
    Spring实践第三天 (SpringDI:依赖注入)
    单例模式(Singleton)
    Spring IOC 及 Spring 中Bean的三种创建方式
    Spring实践第二天(创建对象的三种基本方式)
    ORA-28374: typed master key not found in wallet
    Unable open dabase as spfile parameter incorrect
    【java/C# 服务器】IOS 配置推送证书 p12文件流程
    第一贱-UILabel
    iOS开发系列--让你的应用“动”起来
    AFNetworking 使用总结
  • 原文地址:https://www.cnblogs.com/rxfn/p/9531140.html
Copyright © 2011-2022 走看看