ajax get/post请求-优快云博客

本文链接：https://blog.youkuaiyun.com/encircles/article/details/51725785

本文介绍如何使用AJAX实现GET和POST两种方式的用户名验证。通过前端JavaScript与后端交互完成实时反馈，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GET:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function checkname(){
            //ajax方式,用户名校验
            //一: 获取用户名信息
            var nm=document.getElementById("username").value;
            //对传递的特殊符号(例如 & = 等)进行编码处理,同时对中文也进行编码处理
            nm=encodeURIComponent(nm);
            //二: ajax校验
            var xhr=new XMLHttpRequest();
            //ajax事件的设置,以便接收返回的信息
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    alert(xhr.responseText);
                }
            };
            xhr.open("get","./04.php?name="+nm+'&addr=beijing');
            xhr.send(null);
        }

    </script>
</head>
<body>
<h2>ajax之用户名的校验(get方式)</h2>
<p>用户名 <input type="text" id="username" onblur="checkname()"/></p>
<p>手机号码 <input type="text" id="tel"/></p>
</body>
</html>

POST:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function checkname(){
            var nm=document.getElementById("username").value;
            nm=encodeURIComponent(nm);

            //把用户名信息变为"请求字符串";
            var info="name="+nm+"&age=23";

            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    alert(xhr.responseText);
                }
            };
            xhr.open("post","06.php");
            //post方式传递数据是模拟form表单传递数据
            //form表单的post格式数据是通过xml形式传递给服务器
            //以下setRequestHeader()方法必须要在open()方法后调用
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
            xhr.send(info);

        }

    </script>
</head>
<body>
<h2>ajax之用户名的校验(post方式)</h2>
<p>用户名:<input type="text" id="username" onblur="checkname()"/></p>
<p>手机号码:<input type="text" id="tel"/></p>
</body>
</html>