ajex有参数请求

  1. 创建form表单,给用户输入信息
  2. 获取提交按钮,并添加点击的时间
  3. 给予提交按钮一个回调函数,并用return false语句禁止提交按钮的默认行为
    创建一个Ajax对象
    创建请求监听并判断
  4. 获取用户的参数来构建一个uri地址
  5. 请求方式用get

ajax.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="test1.php" method="get">
        <input type="text" name="username" id = 'username'>
        <input type="password" name="password" id = 'password'>
        <input type="submit" name="" id = 'submit'>
    </form>
</body>
<script>
    var btn = document.getElementById('submit');
    btn.onclick = function(){
        console.log('点击事件成功<br>');    
        var xhr = new XMLHttpRequest(); 
        xhr.onreadystatechange = function () { 
                console.log('监听到状态变化'+xhr.readyState+'<br>'); 
             if (xhr.readyState == 4 && xhr.status == 200){
                console.log('发送成功 接收成功<br>');

                document.write(xhr.responseText);

             }
        }
         var username = document.getElementById('username').value;          // 获取input里得值
         //console.log(username);
         var password = document.getElementById('password').value;
         var uri = 'test1.php?username='+username+'&password'+password;     // 拼接uri请求得地址

         document.write(uri);

        xhr.open('get',uri,true);                                       // 通过test.php?user=?? & pass=xxx发送数据
        xhr.send(null); 
        return false; 
    }
     
</script>
</html>

test.php代码如下

<?php 
echo "ggg";
 ?>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容