ajax 请求实例

最新推荐文章于 2020-10-07 20:45:45 发布

喀喀喀是

最新推荐文章于 2020-10-07 20:45:45 发布

阅读量471

点赞数

分类专栏： ajax 文章标签： ajax 实例

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

get提交方式

html代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <form action="">
        <p>用户名：<input type='text' name="username" value=""><span id='yz'></span></p>
        <p><input type='submit' value="登陆" ></p>
    </form>

</body>

<script >

    var user = document.getElementsByName('username')[0];
    var yz = document.getElementById('yz');

    user.onblur = function(){
        var url = './1.php?username='+this.value;
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(this.readyState == 4){

                if(this.responseText == 0){
                    yz.innerHTML = '<font color=green>恭喜验证通过</font>';
                }else{
                    yz.innerHTML = '<font color=red>重命名</font>';
                }
            }

        }

        xhr.open('get',url,true);
        xhr.send(null);
    }

</script>

</html>

php代码

<?php

$data = $_GET['username'];

$user = array('zhang','wang');

echo in_array($data,$user)?1:0;

?>

POST提交方式

html代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <form action="" method="post">
        <p>用户名：<input type='text' name="username" value=""><span id='yz'></span></p>
        <p>用户名：<input type='text' name="email" value=""><span id='yz'></span></p>
        <p><input type='submit' value="登陆" ></p>
    </form>

</body>

<script >

    document.getElementsByTagName('form')[0].onsubmit = function(){

    var inps = document.getElementsByTagName('input');
    var data = 'username=' + inps[0].value + '&email=' + inps[1].value;
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(){
        if(this.readyState == 4){
            alert(this.responseText);
        }
    }

    xhr.open('post','1.php',true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send(data);

    return false;

}   

</script>

</html>