当前位置:首页>文章>js提示框代码(js的三种弹出式消息提醒)

js提示框代码(js的三种弹出式消息提醒)

这个功能的实现主要使用了jsonp跨域访问,然后通过回调函数来将搜索到的关联内容显示出来。 JSONP(JSONwithPadding)是一个非官方的协议,它允许在服务器端集成Scripttags返回至客户端,通过javascriptcallback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。 回调函数:当一个函数作为另一个函数的参数时,那么这个函数就是回调函数。 效果如下 代码如下 ...

这个功能的实现主要使用了jsonp跨域访问, 然后通过回调函数来将搜索到的关联内容显示出来 。

JSONP(JSONwith Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

回调函数:当一个函数作为另一个函数的参数时,那么这个函数就是回调函数。

效果如下

js提示框代码(js的三种弹出式消息提醒)

代码如下

<script type=\"text/javascript\">
      var txt = document.getElementById(\'text\');
      var oUl = document.getElementById(\'list\');
      var oBtn = document.getElementById(\'btn\');

      txt.onkeyup = function () {
        oUl.innerHTML = \'\';
        oUl.style.display = \'none\';
        var val = txt.value;
        var oScript = document.createElement(\'script\'); //动态创建script标签
        oScript.src =
          \'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=\' +
          val +
          \'&cb=callback\';
        //添加链接及回调函数
        document.body.appendChild(oScript); //添加script标签
        document.body.removeChild(oScript); //删除script标签
      };
      //回调函数

      function callback(data) {
        if (data.s && data.s.length) {
          const res = data.s;
          res.forEach(function (value) {
            var oLi = document.createElement(\'li\');
            oLi.innerHTML =
              \'<a style=\"display:inline-block;width:100%\" href=\"https://www.baidu.com/s?wd=\' +
              value +
              \'\">\' +
              value +
              \'</a>\';
            oUl.appendChild(oLi);
          });

          oUl.style.display = \'block\';
        }
      }
      //点击跳转到百度页面,并搜索其中内容
      oBtn.onclick = function () {
        var val = txt.value;
        location.href = \'http://www.baidu.com.cn/s?wd=\' + val + \'&cl=3\';
      };
    </script>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
文章

联想yoga平板手机价格(国产平板电脑排行榜)

2022-1-18 12:06:50

文章

sqlserver连接工具有哪些(连接sqlserver数据库步骤)

2022-1-18 12:06:52

重要说明

本站资源大多来自网络,如有侵犯你的权益请联系管理员 青年人  或给邮箱发送邮件834379394@qq.com 我们会第一时间进行审核删除。 平台资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果你遇到支付完成,找不到下载链接,或者不能下载,或者解压失败,先不要忙,加管理员的QQ:834379394 (管理员有可能有事情或者在睡觉不能及时的回复您,QQ留言后,请耐心等待即可!)

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索