js通过AJAX获取后台数据渲染到页面_js ajax后渲染li

作者：盐析白兔 | 2024-08-11 14:29:59

踩

js ajax后渲染li

1.GET

html部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX发送GET请求并传递参数</title>
</head>
<body>
  <ul id="list"></ul>

  <script>
    // 获取ul的id
    var listElement = document.getElementById('list');
    // 发送ajax请求获取列表数据呈现在也页面
    // ====================================
    var xhr = new XMLHttpRequest();
    // 打开网址
    xhr.open('GET','users.php');
    // 敲回车等响应
    xhr.send();

    // 接收请求
    xhr.onreadystatechange = function(){
      //判断请求题是不是我们想要的数据
      if(this.readyState !== 4) return;
      // 获取传过来的json数据
      var data = JSON.parse(this.responseText);
      //data ==> 数据

      // for循环创建动态li
      for(var i=0; i<data.length; i++ ){
        // 创建动态li标签
        var liElement = document.createElement('li');
        // 给li添加数据
        liElement.innerHTML = data[i].name;
        // 给li添加id
        liElement.id = data[i].id;

        // 把li追加到ul里面去
        listElement.appendChild(liElement);

        // 获取点击元素的数据
        liElement.addEventListener('click',function(){
          var xhr2 = new XMLHttpRequest();
          // 打开文件
          xhr2.open('GET','users.php?id='+ this.id);  //问号传参
          // 敲回车等响应
          xhr2.send();
          console.log(this.id);
          xhr2.onreadystatechange = function(){
            //判断请求题是不是我们想要的数据
              if(this.readyState !== 4) return;
              // 获取传过来的json数据
              var data2 = JSON.parse(this.responseText);
              //data ==> 数据
              console.log(data2);
          };
        });  
      }
    }
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

php部分

<?php
header('Content-Type: application/json');
/**
 * 返回的响应就是一个 JSON 内容（返回的就是数据）
 * 对于返回数据的地址一般我们称之为接口（形式上是 Web 形式）
 */

// `/users.php?id=1` => id 为 1 的用户信息

$data = array(
  array(
    'id' => 1,
    'name' => '张三',
    'age' => 18
  ),
  array(
    'id' => 2,
    'name' => '李四',
    'age' => 20
  ),
  array(
    'id' => 3,
    'name' => '二傻子',
    'age' => 18
  ),
  array(
    'id' => 4,
    'name' => '三愣子',
    'age' => 19
  )
);
if (empty($_GET['id'])) {
  // 没有 ID 获取全部
  // 因为 HTTP 中约定报文的内容就是字符串，而我们需要传递给客户端的信息是一个有结构的数据
  // 这种情况下我们一般采用 JSON 作为数据格式
  $json = json_encode($data); // => [{"id":1,"name":"张三"},{...}]
  echo $json;
} else {
  // 传递了 ID 只获取一条
  foreach ($data as $item) {
    if ($item['id'] != $_GET['id']) continue;
    $json = json_encode($item); // => [{"id":1,"name":"张三"},{...}]
    echo $json;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

2.POST

html部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX发送POST请求</title>
  <style>
    #loading {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #555;
      opacity: .5;
      text-align: center;
      line-height: 300px;
    }

    #loading::after {
      content: '加载中...';
      color : #fff;
    }
  </style>
</head>
<body>
  <div id="loading"></div>
  <table border="1">
    <tr>
      <td>用户名</td>
      <td><input type="text" id="username"></td>
    </tr>
    <tr>
      <td>密码</td>
      <td><input type="password" id="password"></td>
    </tr>
    <tr>
      <td></td>
      <td><button id="btn">登录</button></td>
    </tr>
  </table>
  <script>

    var btn = document.getElementById('btn')
    // 1. 获取界面上的元素 value
    var txtUsername = document.getElementById('username')
    var txtPassword = document.getElementById('password')
    var loading = document.getElementById('loading')

    // 注册点击事件
    btn.onclick = function() {
      // 显示正在加载中
      loading.style.display = 'block';
      // 获取文本框内的value值
      var username = txtUsername.value;
      var password = txtPassword.value;

      // 发送post事件
      var xhr =new XMLHttpRequest();
      // 获取浏览器
      xhr.open('POST','login.php');

      // post响应操作
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      // xhr.send('username=' + username + '&password=' + password); 方法1;
      xhr.send(`username=${username}&password=${password}`); //方法二

      // 获取服务器反馈
      xhr.onreadystatechange = function(){
        // 判断接收的数据
        if(this.readyState !== 4) return;
        //获取提示文本
        alert(this.responseText);
        // 隐藏加载中
        loading.style.display = 'none';
      }
    }
  </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

php部分

<?php 
// 校验用户输入的用户名和密码
if(empty($_POST['username']) && empty($_POST['password']) ){
  exit('请输入用户名或密码');
}

$username = $_POST['username'];
$password = $_POST['password'];

// 校验密码是否正确
if($username === 'zhangs' && $password === '123456' ){
  exit('登录成功');
}

exit('请输入正确的用户名或密码');
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/964716