jQuery-Ajax

Ajax

ajax作用:通过JavaScript代码向网络上的地址发送异步请求。

格式:

$(‘#btn‘).click(function () {
    $.ajax({
        type: ‘GET‘,
        // 也可以向网络地址 http://www.xxxx.com 发送请求。
        url: ‘data.json‘,
        success: function (arg) {
            console.log(arg);
        }
    })
});
<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>jQuery学习</title>
  </head>
  <body>
  <input type="button" id="btn" value="获取数据">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript">
      $(function () {
          $(‘#btn‘).click(function () {
              $.ajax({
                  type: ‘GET‘,
                  // 也可以向网络地址 http://www.xxxx.com 发送请求。
                  url: ‘data.json‘,
                  success: function (arg) {
                      console.log(arg);
                  }
              })
          });
      })
  </script>
  </body>
  </html>

基于ajax实现数据管理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery学习</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>id</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<input type="button" id="btn" value="获取数据">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(‘#btn‘).click(function () {
            $.ajax({
                type: ‘GET‘,
                // 也可以向网络地址 http://www.xxxx.com 发送请求。
                url: ‘data.json‘,
                success: function (arg) {
                    console.log(arg);
                    // 1 先制作出所有的tr标签
                    var s = ‘‘;
                    for (var i in arg){
                        var a = ‘<tr><td>‘+ arg[i][‘id‘] +‘</td><td>‘+ arg[i][‘name‘] +‘</td><td>‘+ arg[i][‘age‘] +‘</td></tr>‘;
                        s += a;
                    }
                    // 2 找到tbody标签,将标签添加进去
                    $(‘tbody‘).append(s);
                }
            })
        });
    })
</script>
</body>
</html>

jQuery-Ajax

上一篇:Three.JS一1 简介与基本示例


下一篇:基于vw和rem得根字号大小设置css样式