jsonp解决跨域_案例

最新推荐文章于 2023-08-01 13:13:34 发布

hacalili

最新推荐文章于 2023-08-01 13:13:34 发布

阅读量95

点赞数 1

分类专栏： Ajax HTML+CSS+JS（案例展示）文章标签： javascript 前端 html ajax

本文链接：https://blog.csdn.net/weixin_42541725/article/details/123100612

版权

HTML+CSS+JS（案例展示）同时被 2 个专栏收录

46 篇文章 4 订阅

订阅专栏

Ajax

16 篇文章 0 订阅

订阅专栏

效果展示：

功能：

判断用户输入的用户名是否存在

代码如下：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax jsonp解决跨域_案例</title>
</head>
<body>
    请输入用户名：<input type="text">
    <p></p>
    <script>
        const input = document.querySelector('input');
        const p = document.querySelector('p');
        function handle(data){
            input.style.border = "1px solid red";
            p.innerHTML = data.msg;
            p.style.color = 'red';
        };
        input.onblur = function(){
            //获取用户的输入值
            let uname = this.value;
            //向服务端发送请求，检测用户名是否存在
            //1.创建script标签
            const script = document.createElement('script');
            //2.设置标签的src属性
            script.src = 'http://127.0.0.1:8000/check-username'
            //3.将script插入到文档中
            document.body.appendChild(script);
        }
    </script>

</body>
</html>

JS:

// 引入
const { request } = require('express');
// 创建应用对象
const express = require('express');
// 创建应用对象
const app = express();
// 创建路由规则
app.all('/check-username',(request,response) => {
    const data = {
        exist: 1,
        msg: '用户已存在'
    };
    let str = JSON.stringify(data);
    // 设置响应体
    response.end(`handle(${str})`);
});
// 监听端口启动服务
app.listen(8000,() => {
    console.log("服务已启动，8000端口监听中...");
})