jsonp手写跨域360搜索栏提示

最新推荐文章于 2022-11-15 19:21:29 发布

纳米606

最新推荐文章于 2022-11-15 19:21:29 发布

阅读量201

点赞数

本文链接：https://blog.csdn.net/qq_38620301/article/details/105568787

版权

JavaScript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

node.js

3 篇文章 0 订阅

订阅专栏

请求页面代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/template-web.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #app {
            margin:  100px auto;
            display: block;
            width: 610px;
        }
        input{
            display: block;
            width: 500px;
            height: 50px;
            outline-style: none;
            font-size: 40px;
            line-height: 40px;
        }
        li {
            list-style: none;
        }
        li {
            width: 480px;
            border: 1px solid #E2E2E2;
            padding: 10px;
            border-top: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" autofocus>
        <ul></ul>
    </div>
    
    <script type="text/html" id="tp1">
       <%for(let i = 0; i < obj.result.length; i++){%>
            <li><%=obj.result[i].word%></li>
       <%}%>
    </script>
    <script type="text/javascript">
        function suggest_so(obj){
            html = template('tp1',{obj});
            const ul = document.getElementsByTagName('ul')[0];
            ul.innerHTML = html;

        }
        (function(){
            // 当input内容变化就会触发
            document.getElementsByTagName('input')[0].oninput = function() {
                const script = document.createElement('script');
                script.src=`https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=${this.value}&huid=11LyPV%2F40quxRkUykFdCqNwbOzOgMoUO7So0sL8w0LsRc%3D&llbq=A5%2CB5%2CC5%2CD5`;
                document.body.appendChild(script);
                
            };
        })();
    </script>
</body>
</html>
<!-- https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=%E7%88%B1%E5%A5%87%E8%89%BA&huid=11LyPV%2F40quxRkUykFdCqNwbOzOgMoUO7So0sL8w0LsRc%3D&llbq=A5%2CB5%2CC5%2CD5
https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=%E4%BC%98%E9%85%B7&huid=11LyPV%2F40quxRkUykFdCqNwbOzOgMoUO7So0sL8w0LsRc%3D&llbq=A5%2CB5%2CC5%2CD5
https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=  &huid=11LyPV%2F40quxRkUykFdCqNwbOzOgMoUO7So0sL8w0LsRc%3D&llbq=A5%2CB5%2CC5%2CD5 -->

服务器代码

const express = require('express');
const server = express();
const path = require('path');
server.use(express.static(path.join(__dirname,'public')));

server.listen(3000);

最后效果
在这里插入图片描述

纳米606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp手写跨域360搜索栏提示

请求页面代码:<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/template-web.js"></script&g...
复制链接

扫一扫