ajax基础

最新推荐文章于 2022-05-16 18:05:08 发布

晚生隆海

最新推荐文章于 2022-05-16 18:05:08 发布

阅读量99

点赞数

分类专栏： web前端 # JavaScript # nodejs 文章标签： ajax js node.js javascript

本文链接：https://blog.csdn.net/thlchina/article/details/115457941

版权

web前端同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

JavaScript

29 篇文章 1 订阅

订阅专栏

nodejs

13 篇文章 0 订阅

订阅专栏

ajax基础

ajax-get
ajax-post
ajax-get-query
ajax-post-body
ajax-post-用户注册
ajax-post-用户登陆

ajax-get

<body>
    <h1>这是第一个ajax网页</h1>
    <script>
        //1.创建对象
        var xhr = new XMLHttpRequest();
        //2.绑定接收状态改变事件
        xhr.onreadystatechange = function () {
            //5.接收返回的数据
            alert(xhr.responseText);
        };
        //3.打开连接
        xhr.open('GET', 'http://127.0.0.1:8080/ajax/test', true);
        //4.发送请示
        xhr.send();
    </script>
</body>

ajax-post

<body>
    <h1>post版的ajax</h1>
    <script>
        //1.创建xhr对象
        var xhr = new XMLHttpRequest();
        //2.绑定接收状态改变事件
        xhr.onreadystatechange = () => {
            //5.接收返回的数据
            alert(xhr.responseText);
        };
        //3.打开连接
        xhr.open('POST', 'http://127.0.0.1:8080/ajax/ttt', true);
        //3.1修改请求类型
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        //4.发送请求
        xhr.send();
    </script>
</body>

ajax-get-query

<body>
    <h1>ajax_query</h1>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            alert(xhr.responseText);
        };
        xhr.open('GET', 'http://127.0.0.1:8080/ajax/ttt2?pid=5', true);
        xhr.send();
    </script>
</body>

ajax-post-body


<body>
    <h1>post传递和body接收</h1>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            alert(xhr.responseText);
        };
        xhr.open('POST', 'http://127.0.0.1:8080/ajax/ttt3', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send('pid=3&age=19');
    </script>
</body>

ajax-post-用户注册

<body>
    <h1 id="msg" style="color: red"></h1>
    <form action="#" method="post">
        <ul>
            <li>
                用户名：<input type="text" id="uname">
                <span></span>
            </li>
            <li>
                密码：<input type="password" id="upwd" name="upwd">
                <span></span>
            </li>
            <!-- <li>
                确认密码：<input type="password" id="upwdres" name="upwdres">
            </li> -->
            <li>
                <input type="button" id="btn" value="注册" onclick="reg()">
            </li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!-- <input type="text">
        <input type="text">
        <input type="text"> -->
    </form>
    <script>
        function reg() {
            //创建ajax对象
            let xhr = new XMLHttpRequest();
            let name = document.getElementById('uname').value;
            let pwd = document.getElementById('upwd').value;
            let reg = /^[0-9a-zA-Z]{4,16}$/;
            let span = document.getElementsByTagName('span');
            if (!reg.test(name)) {
                span[0].innerHTML = '请输入4-16位用户名';
                return;
            } else {
                span[0].innerHTML = '';
            };
            if (!reg.test(pwd)) {
                span[1].innerHTML = '请输入4-16位密码';
                return;
            } else {
                span[1].innerHTML = '';
            };
            xhr.onreadystatechange = function () {
                //接收服务器返回数据
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let msg = document.getElementById('msg');
                    let obj = JSON.parse(xhr.responseText);
                    msg.innerHTML = obj.msg;
                }
            };
            //绑定状态修改事件
            xhr.open('POST', 'http://127.0.0.1:8080/v1/users/reg', true);
            //修改请求主体类型
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            var formdata = `uid=null&uname=${name}&upwd=${pwd}&email=a@qq.com&phone=100&avatar=1.jpg&user_name=yaya&gender=1`;
            xhr.send(formdata);
        }
    </script>
</body>

ajax-post-用户登陆

<body>
    <form action="#" method="post">
        <h1 id="msg"></h1>
        <ul>
            <li>
                用户名：<input type="text" id="uname" name="uname">
            </li>
            <li>
                密码：<input type="password" id="upwd" name="upwd">
            </li>
            <li>
                <input type="button" id="btn" onclick="login()" value="登陆">
            </li>
        </ul>
    </form>
    <script>
        function login() {
            let name = document.getElementById('uname').value;
            let pwd = document.getElementById('upwd').value;
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let msg = document.getElementById('msg');
                    let obj = JSON.parse(xhr.responseText);
                    msg.innerHTML = obj.msg;
                }
            };
            xhr.open('POST', 'http://127.0.0.1:8080/v1/users/login', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            let formdata = `uname=${name}&upwd=${pwd}`;
            console.log(formdata);
            xhr.send(formdata);
        };
    </script>
</body>

晚生隆海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ajax基础

ajax基础ajax-getajax-postajax-queryajax-get<body> <h1>这是第一个ajax网页</h1> <script> //1.创建对象 var xhr = new XMLHttpRequest(); //2.绑定接收状态改变事件 xhr.onreadystatechange = function () { //5.接
复制链接

扫一扫