* {
margin: 0;
padding: 0;
} input {
width: 300px;
height: 30px;
border: 1px solid lightgray;
margin-top: 150px;
margin-left: 200px;
padding-left: 5px;
} ul {
width: 307px;
list-style: none;
margin-left: 200px;
display: none;
} li {
height: 30px;
border: 1px solid lightgray;
line-height: 30px;
padding-left: 5px;
}

  

<input type="text" id="inputSearch">
<ul id="ulList">
<li>123</li>
</ul>

  

<script>
function callbackD(response) {
  console.log(response)
  var oUl = document.getElementById('ulList');
  var html = '';
  if(response.s.length != 0) {
    oUl.style.display = 'block';
    for(var i = 0; i < response.s.length; i++) {
      html += '<li>' + response.s[i] + '</li>'
    }
  }
  oUl.innerHTML = html;
}
</script>
<script>
window.onload = function() {
  //获取dom元素
  var oData = document.getElementById('inputSearch');
  var oUl = document.getElementById('ulList');   //键盘按下后抬起触发事件(onkeyup)
  oData.onkeyup = function() {
    if(oData.value != '') {
      //创建标签(createElement)
      var script = document.createElement("script");
      //添加地址
      script.src = 'http://unionsug.baidu.com/su?wd=' + this.value + '&p=3&cb=callbackD';
      //添加给body的(成为body包涵的孩子)       document.body.appendChild(script);
    } else {
      oUl.style.display = 'none';
    }   } };
</script>

  

JS实现跨域请求数据--jsonp的更多相关文章

  1. JS实现跨域请求数据--CORS

    https://www.cnblogs.com/cjw-ryh/p/7674038.html?utm_source=debugrun&utm_medium=referral

  2. js跨域请求(jsonp)

    jsonp是跨域请求的手段之一. jsonp的原理: 先来看看下面这段代码 <!DOCTYPE html> <html lang="en"> <hea ...

  3. js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...

  4. js跨域请求方式 ---- JSONP原理解析

    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下     跨域请求数据解决方案主要有如下解决方法:   1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...

  5. 使用JSONP跨域请求数据

    下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记.

  6. 跨域请求之JSONP 一

    跨域请求之JSONP 一 跨域请求的方式有很多种, iframe document.domain window.name script XDomainRequest (IE8+) XMLHTTPReq ...

  7. jquery 跨域请求数据问题

    昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题.当被问到用jquery跨 ...

  8. JAVAEE——宜立方商城11:sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求(jsonp)

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

  9. JS JSOP跨域请求实例详解

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...

随机推荐

  1. hdu 4286 (list的reverse时间复杂度为n)

    list 的翻转reverse源码: // 将链表倒置 // 其算法核心是历遍链表, 每次取出一个结点, 并插入到链表起始点 // 历遍完成后链表满足倒置 template <class T, ...

  2. css总结9:内边距(padding)和外边距(margin)

    1 css总结9:内边距和外边距 通过css总结8:盒子模型可知:内边距(padding),外边距(margin).可以影响盒子在浏览器的位置. 1.1 padding使用:{padding:上 右 ...

  3. struts2 、mybatis 、easyui 分页

    rows page 控件自动提交这两个参数 pageSize number The page size. 10pageNumber number Show the page number when p ...

  4. (转)MongoDB入门分享-笔记整理精选

    原文地址:http://www.cnblogs.com/Kummy/p/3372729.html 最近在学习MongoDB,怕以后忘记,自己做了一个整理,给不知道的小伙伴一起分享学习一下. 第一步&g ...

  5. 献上一款漂亮的手写PHP验证码

    献上一款漂亮的PHP验证码,可以根据个人需求作调整,代码如下(审美观不同,欢迎吐槽): <?php /** * Author: xiongwei * Email: 695704253@qq.co ...

  6. fabric Clone

    记录下: var newObj = fabric.util.object.clone(obj); decDoc.dropCanvas.add(newObj., top: }));

  7. RabbitMQ单机集群搭建出现Error: unable to perform an operation on node 'rabbit1@ClusterNode1'

    参考链接:https://www.cnblogs.com/daryl/archive/2017/10/13/7645749.html 全部步骤和参考链接相同. 前八部都正常,在第九步会报错Error: ...

  8. Selenium API(二)

    1.定位一组元素 WebDriver提供了8种定位一组元素的方法. driver.find_elements_by_css_selector() driver.find_elements_by_tag ...

  9. Selenium辅助工具

    下载Firefox39.0版本浏览器,安装firebug和FirePath.最新版的Firefox在扩展组件中无法找到firebug,可以使用旧的版本的Firefox浏览器. FirePath插件的使 ...

  10. 「BZOJ 3123」「SDOI 2013」森林「启发式合并」

    题意 你有一个森林,你需要支持两个操作 查询两个结点路径上权值第\(k\)小 两个点之间连一条边 强制在线,结点数\(\leq 8\times 10^4\) 题解 如果可以离线,这就是一个主席树板子题 ...