Ajax实例

最新推荐文章于 2023-04-12 23:37:53 发布

江judge

最新推荐文章于 2023-04-12 23:37:53 发布

阅读量646

点赞数 2

分类专栏： Ajax 文章标签： Ajax

本文链接：https://blog.csdn.net/qq_41281571/article/details/81368831

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax实例

Ajax，最好的方便之处就是不用页面跳转来实现数据传输，直接js脚本，向处理页面提交异步请求，有点像多线程的感觉，用一个分支线程来进行数据分析，而不用整个页面跳转，用户体验非常好。

var name=document.getElementById(“name”);

name.innerHTML=要改变的值，占位。

in_array(值，数组)：检测值是否在数组里面

onblur：焦点失去事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
<div align="center">
    <h3>用户登录</h3>
    <form action="check.php" method="get">
        <p>帐号: <input type="text" name="name" id="name"></p>
        <p>密码: <input type="password" name="password" id="password"></p>
        <p><input type="submit" id="submit" value="提交"></p>
        <p id="tips"></p>
    </form>
</div>
</body>
<script>
    var submit = document.getElementById('submit');  //获取提交按钮
    submit.onclick = function () {
        //1.创建Ajax对象
        var xhr = new XMLHttpRequest();
        //2.创建请求事件的监听
        xhr.onreadystatechange = function () {
            if(xhr.readyState==4 && xhr.status == 200){
                console.log(typeof  xhr.responseText);
                //解析返回的json字符串，把json字符串解析成json对象形式，下面可以用.来访问对象里                //的数据
                var json = JSON.parse(xhr.responseText);
                var tips = document.getElementById('tips');
                tips.innerHTML = '欢迎用户'+json.name+'再次回来';
            }
        }

        //3.初始化一个url请求
        var user = document.getElementById('name').value;
        var password = document.getElementById('password').value;
        var url = 'check.php?name='+user+'&password='+password;  //生成url地址
        xhr.open('get',url,true); //请求类型为get，交互方式为异步

        //4.发送url请求
        xhr.send(null);
        return false;  //禁止提交按钮的默认行为
    }
</script>
</html>

var user=document.getElementById("user");
user.onblur=function(){

}

用户登陆表单用Ajax实现不跳转页面的验证

post传值，需要多加一步设置请求头
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
<div align="center">
    <h3>用户登录</h3>
    <form action="check.php" method="post">
        <p>帐号: <input type="text" name="name" id="name"></p>
        <span id="warning" style="color:red"></span>
        <p>密码: <input type="password" name="password" id="password"></p>
        <p><input type="submit" id="submit" value="提交"></p>
        <p id="tips"></p>
    </form>
</div>
</body>
<script>
    var user = document.getElementById('name');  //获取用户控件
    user.onblur = function () {  //当用户离开当前文本框的时行验证
        //1.创建Ajax对象
        var xhr = new XMLHttpRequest();
        //2.创建请求事件的监听
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (xhr.responseText == 0) {  //当前用户不存在
                    var warning = document.getElementById('warning');
                    warning.innerHTML = '新用户,请先注册再登录~~';
                    document.getElementById('submit').disabled = true;
                }
            }
        }

        //3.初始化一个url请求
        var user = document.getElementById('name').value;
        var password = document.getElementById('password').value;
        var data = 'name='+user+'&password='+password; //生成post请求数据
        var url = 'check.php';
        xhr.open('post',url,true); //请求类型为post，交互方式为异步

        //4.设置请求头
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

        //5.发送url请求,需要传入参数
        xhr.send(data);

        var submit = document.getElementById('submit');
        submit.onclick = function () {
            var tips = document.getElementById('tips');
            tips.innerHTML = '验证通过,正在跳转中~~';
            return false;
        }
    }
</script>
</html>

check.php

<?php
$userList = ['peter', 'jack', 'mike'];  //已注册用户列表
$user = isset($_POST['name']) ? $_POST['name'] : '';
echo in_array($user, $userList) ? 1 : 0;  //如果用户名不在列表中返回0,否则返回1
?>

江judge

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Ajax实例

Ajax实例Ajax，最好的方便之处就是不用页面跳转来实现数据传输，直接js脚本，向处理页面提交异步请求，有点像多线程的感觉，用一个分支线程来进行数据分析，而不用整个页面跳转，用户体验非常好。var name=document.getElementById(“name”);name.innerHTML=要改变的值，占位。in_array(值，数组)：检测值是否在数组里面onbl...
复制链接

扫一扫