javascript提示框用法 js提示对话框 _js提示对话框

文章插图

文章插图
【javascript提示框用法 js提示对话框】这个功能的实现主要使用了jsonp跨域访问, 然后通过回调函数来将搜索到的关联内容显示出来。
JSONP(JSONwith Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
回调函数：当一个函数作为另一个函数的参数时，那么这个函数就是回调函数。
效果如下

代码如下

<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>