原生jsonp

实现效果：当输入完失去焦点时跳出

app.all('/check-username', (request, response) => {
    //设置响应头,第一部分是头的名字，后面是值。作用是为了允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 定义一个对象
    const data={
        exist:1,
        msg:'用户名已存在'
    };
    let str=JSON.stringify(data);//将数据转化为json字符串
    response.end(`handle(${str})`);
});

1
2
3
4
5
6
7
8
9
10
11
12

<body>
    <label for="admin">用户名：</label><input class='admin' type="text">
    <p></p>
    <script>
        let input = document.querySelector('input');
        let p = document.querySelector('p');
        function handle(data) {
            input.style.border = '1px solid #f00';
            p.innerHTML = data.msg;
        }
        input.onblur = function () {
            // 获取用户的输入值
            let username = this.value;
            // 创建一个script标签
            const script = document.createElement('script');
            script.src = 'http://127.0.0.1:8000/check-username';
            document.body.appendChild(script);
        }
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

编辑

上次更新: 2023/7/11 18:57:41

← ajax关于同源 ajax跨域（cors）→