* {
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. Cannot resolve the collation conflict between "Chinese_PRC_CI_AS" and "SQL_L及由于排序规则不同导致查询结果为空的问题

    报错:Cannot resolve the collation conflict between "Chinese_PRC_CI_AS" and "SQL_L 出错原因: ...

  2. MySQL事务隔离级别测试实例

    https://www.cnblogs.com/huanongying/p/7021555.html MySQL事务隔离级别 事务隔离级别 脏读 不可重复读 幻读 读未提交(read-uncommit ...

  3. Which Uri Encoding method should i use in C#/.net?

    June 19, 2015 This too is one of the boring "factual" posts. Sorry Lachlan. I never know w ...

  4. web大文件上传控件-监控f_create流程-Xproer.HttpUploader6

    监控f_create流程 1.打开ie,f12 2.启动网络监控 点击开始捕获 上传文件,然后查看监控 将监控信息转到详细视图 向f_create提交的数据 f_create返回值

  5. 第一章:HTTP服务器,客户端简易代码解析

    HTTP服务器: 方法{ main service } service:读取HTTP请求信息    解析HTTP请求  决定HTTP相应正文的类型   创建HTTP相应结果  发送HTTP相应结果 读 ...

  6. Underscore.js 1.3.3 中文解释

    // Underscore.js 1.3.3 // (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc. // Underscore is freely ...

  7. 游戏中遇到的BUG

    (1)bug描述:战斗中有英雄死亡,一方掉线之后再次上线,仍然可以看到死亡英雄空血条(英雄受到攻击才会显示血条) 解决方案:原来 当前血量小于英雄血量最大值时,证明英雄受到伤害,血条显示为true I ...

  8. c++内存模型------计算机系统核心概念及软硬件实现

    c++编程语言有3中不同类项的变量:全局变量.局部变量和动态分配变量.变量的值存储在计算机的内存中,但是变量存储的方式取决于变量的类项.3种类型的变量分别对应存储器中3个特定的区域: 全局变量存放在存 ...

  9. 《Thinking in Java》 10~

    chapter 10 内部类(P191) 创建内部类 链接到外部类 内部类能访问器外围对象的所有成员,而不需要任何特殊条件. 使用.this与.new package cn.test; public ...

  10. 857. Minimum Cost to Hire K Workers

    There are N workers.  The i-th worker has a quality[i] and a minimum wage expectation wage[i]. Now w ...