ajax ----get请求

最新推荐文章于 2023-10-24 15:55:21 发布

?� ?? � ?

最新推荐文章于 2023-10-24 15:55:21 发布

阅读量157

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/Cg_Companion_Xi/article/details/106699312

版权

发送 Ajax 请求的五个步骤

1.创建异步对象。即 XMLHttpRequest 对象。

2.注册事件。 onreadystatechange事件，状态改变时就会调用。
如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。

3.设置请求的参数。包括：请求的方法、请求的url。

4.发送请求。

5.获取返回的数据。
使用ajax GET方式发送请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    用户名：<input type="text" name="username" id="uname"><br>
    密码：<input type="password" name="password" id="pwd"><br>
    <input type="button" value="发送请求" id="btn">

 <script>
     var btn = document.getElementById("btn");
         btn.onclick = function(){
            //  获取用户名
             var name = document.getElementById("uname").value;
            //  获取密码
             var pwd = document.getElementById("pwd").value;
            //  创建xhr对象
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    request(xhr);
                }
            }
            // 发送请求消息，连接服务器
            xhr.open("GET",`01-get.php?username=${name} & pwd=${pwd}`,true);
            // 发送请求消息
            xhr.send(null);
         }
         function request(xhr){
             console.log(xhr.responseText);
         }

 </script>
</body>
</html>

需要写请求的方式如 get 或 post , 以get 方式提交，需要写对应的参数。post 则不需要。true为请求方式是否异步发送。

xhr.open("GET",`01-get.php?username=${name} & pwd=${pwd}`,true);

php中的代码：

<?php
      // 接收用户输入的用户名
      $uname = $_GET['username'];
      // 接收用户输入的密码
      $upwd = $_GET['pwd'];
      echo "姓名：".$uname,"密码：".$upwd;
?>

注意：接收的值应该是用户名，也就是用户输入的数据。$_GET[‘username’]。密码也一样，可以通过后端传入进来的数据进行比较，然后返回对应的结果。
点击按钮时，会发送Ajax 请求，服务端接收用户输入的数据进行判断返回。

function request(xhr){
       console.log(xhr.responseText);//返回的数据结果。
  }

在这里插入图片描述

?� ?? � ?

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax ----get请求

发送 Ajax 请求的五个步骤1.创建异步对象。即 XMLHttpRequest 对象。2.注册事件。 onreadystatechange事件，状态改变时就会调用。如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。3.设置请求的参数。包括：请求的方法、请求的url。4.发送请求。5.获取返回的数据。使用ajax GET方式发送请求：<!DOCTYPE html><html lang="en"><head> <meta
复制链接

扫一扫