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

最新推荐文章于 2022-11-15 20:08:04 发布

ヽ错落不堪的年华。

最新推荐文章于 2022-11-15 20:08:04 发布

阅读量1.5w

点赞数 5

分类专栏：技术交流前端技术总结文章标签：前端后端 js php AJAX

本文链接：https://blog.csdn.net/qq_44777678/article/details/90741790

版权

技术交流同时被 3 个专栏收录

107 篇文章 2 订阅

订阅专栏

技术总结

103 篇文章 0 订阅

订阅专栏

前端

97 篇文章 0 订阅

订阅专栏

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>

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;
  }
}

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>

php部分

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

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

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

exit('请输入正确的用户名或密码');
?>

ヽ错落不堪的年华。

关注

5
点赞
踩
53

收藏

觉得还不错? 一键收藏
0
评论
js通过AJAX获取后台数据渲染到页面

1.GET获取数据html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AJAX发送GET请求并传递参数</title></head><body> <ul id="list"&gt...
复制链接

扫一扫