* {
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. 黑盒测试实践--Day1 11.25

    黑盒测试实践--Day1 今天完成任务情况: 晚上得到老师布置的本周小组作业--黑盒测试的基本要求,然后小组在上周作业建立的微信群里开了个在线的短会,主要内容如下: 组长小靳带领大家学习了这个要求 计 ...

  2. Mybaties原理图

  3. elasticsearch plugin

    bin/plugin -install de.spinscale/elasticsearch-plugin-suggest/0.90.5-0.9 plugin -install mobz/elasti ...

  4. Http中的身份传递

    IIS默认的身份验证方式 身份传递策略包括使用操作系统的委派功能或在应用程序级传递票证和/或凭证 为了阻止IIS的身份验证委派,可以在web.config加入如下设置, <system.web& ...

  5. SharePoint配置网站集的审核设置

    配置网站集的审核设置 您可以使用 Microsoft SharePoint Server 2010 的审核功能来跟踪哪些用户对网站集的网站.内容类型.列表.库.列表项和库文件执行了哪些操作.了解谁对哪 ...

  6. MongoDB整理笔记の导入导出

    一.导入 1.导入json数据 我们先将表user删除掉,以便演示效果: > db.user.drop(); true > show collections; system.indexes ...

  7. [原创]Java源代码学习

    一.一些关键字 方法声明中的native:调用本地方法,该方法一般是用C或者C++写的 变量声明中的transient:在序列化过程中会忽略该变量,即不进行序列化保存 变量声明中的volatile:编 ...

  8. Domoticz 接入苹果的 HomeKit 实现 Siri 控制

    前言 接上次的折腾,这次尝试将 Domoticz 接入到苹果的 HomeKit,也就是在 iPhone 的 Siri 中可以语音控制.参考官方文档 步骤 安装 nodejs curl -sL http ...

  9. MySql数据库数据类型及约束介绍

    1,MySql中数据类型介绍 整型及浮点型 数据类型 存储范围 字节 TINYINT 有符号值:-2^到2^7-1 无符号值:0到2^8-1 2 SMALLINT 有符号值:-2^15到2^15-1 ...

  10. Python web前端 07 函数及作用域

    Python web前端 07 函数及作用域 一.函数 1.有名函数和匿名函数 #函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 #函数就是包裹在花括号里面的代码块,前面使用了关键字fun ...