2022-03-20 ajax的应用例子:检测用户名是否存在,同步百度的搜索栏

前端OnTheRun

已于 2022-12-14 19:42:15 修改

阅读量100

点赞数

分类专栏：项目与应用 ajax 文章标签： js ajax 异步后端前端

于 2022-03-20 21:14:22 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/123621644

版权

项目与应用同时被 2 个专栏收录

57 篇文章 1 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

文章目录

1.检测用户名是否存在

代码

打开服务器,并在阿帕奇服务器的www文件夹下创建如下文件

user.html

<body>
    <label for="">请输入用户名:</label>
    <input type="text">
    <button>点击</button>
    <span></span>
</body>
<script>
    var span = document.querySelector("span");
    var button = document.querySelector("button");
    var input = document.querySelector("input");
    button.addEventListener("click", ajax);
    function ajax() {
        var xhr = new XMLHttpRequest();
        xhr.open("get", "./user.php?user=" + input.value, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (xhr.response == 1) {
                    span.innerHTML = "*已存在";
                    span.style.color = "red";
                }
                if (xhr.response == 2) {
                    span.innerHTML = "*注册成功";
                    span.style.color = "green";
                }
            }
        }
        xhr.send();
    }
</script>

user.php

<?php
  $user=$_GET['user'];
  $arr=['张三','李四','王五'];
  if(in_array($user,$arr)){
    echo 1;
  }else{
    echo 2;
  }
?>

效果

http://localhost/user.html
在这里插入图片描述

2.同步百度的搜索栏

2021-06-21 使用ajax设置同步百度的搜索栏

代码

baidu.html

<body>
    <input type="text" id="txt">
    <ul class="list"></ul>
</body>
<script>
    class Search {
        constructor(ops) {
            this.txt = ops.txt;
            this.list = ops.list;
            this.url = ops.url;
            this.addEvent();
        }
        addEvent() {
            const that = this;
            this.txt.oninput = function() {
                if (this.value === "") return;
                that.v = this.value;
                that.load();
            }
        }

        load() {
            request({
                url: this.url,
                type: "jsonp",
                data: {
                    wd: this.v,
                    cb: "dshdfja"
                },
                filedName: "cb",
                success: (res) => {
                    this.res = res.s;
                    this.render();
                }
            })
        }
        render() { //渲染
            let str = "";
            for (var i = 0; i < this.res.length; i++) {
                str += `<li>${this.res[i]}</li>`;
                this.list.innerHTML = str;
            }
        }
    }
    new Search({
        txt: document.getElementById("txt"),
        list: document.querySelector(".list"),
        url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su"
    });
    //设置ajax
    function request(ops) {
        let {
            url,
            success,
            type = "get",
            data = {},
            error,
            timeout = 1000,
            dataType = "text",
            filedName = ""
        } = ops;
        let str = "";
        for (let i in data) {
            str += `${i}=${data[i]}&`;
        }
        url = url + "?" + str + "_qft_=" + Date.now();
        if (type !== "jsonp") {
            let xhr = new XMLHttpRequest(); //创建xhr对象
            xhr.open(type, url); //设置请求
            xhr.onload = function() {
                    if (xhr.status === 200) {
                        const res = dataType === "json" ? JSON.parse(xhr.responseText) : xhr.responseText;
                    }
                } //设置监听
            xhr.send(); //发送请求
        } else {
            let script = document.createElement("script"); //动态创建script标签
            script.id = "abc";
            script.src = url; //用script标签的src属性进行跨域
            document.body.appendChild(script); //节点追加
            window[data[filedName]] = function(res) {
                res = dataType === "json" ? JSON.parse(res) : res;
                //成功后删除script标签
                success && success(res);
                script && script.remove();
            }
        }
    }
</script>

效果

在这里插入图片描述

3.jQuery的POST方式实现AJAX

代码

<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br> 密码：
        <input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function() {
        let username = $("#username").val();
        //2.jQuery的POST方式实现AJAX
        $.post(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function(data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
        );
    });
</script>