JS实现跨域请求数据--jsonp
* {
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的更多相关文章
- JS实现跨域请求数据--CORS
https://www.cnblogs.com/cjw-ryh/p/7674038.html?utm_source=debugrun&utm_medium=referral
- js跨域请求(jsonp)
jsonp是跨域请求的手段之一. jsonp的原理: 先来看看下面这段代码 <!DOCTYPE html> <html lang="en"> <hea ...
- js跨域请求数据的3种常用的方法
由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript 在 ...
- js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...
- 使用JSONP跨域请求数据
下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记.
- 跨域请求之JSONP 一
跨域请求之JSONP 一 跨域请求的方式有很多种, iframe document.domain window.name script XDomainRequest (IE8+) XMLHTTPReq ...
- jquery 跨域请求数据问题
昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题.当被问到用jquery跨 ...
- JAVAEE——宜立方商城11:sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求(jsonp)
1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...
- JS JSOP跨域请求实例详解
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...
随机推荐
- Linux下的strerror是否线程安全?
下列是glibc-2.14中的源代码: 点击(此处)折叠或打开 char * strerror (errnum) int errnum; { char *ret = __strerror_r (err ...
- 设计模式05: Prototype 原型模式(创建型模式)
Prototype 原型模式(创建型模式) 依赖关系的倒置抽象不应该依赖于实现细节,细节应该依赖于抽象.对所有的设计模式都是这样的. -抽象A直接依赖于实现细节b -抽象A依赖于抽象B,实现细节b依赖 ...
- ubuntu14.04LTS下制作安装启动U盘
ubuntu自带的启动U盘制作工具在我的非UEFI电脑上无法启动,找到一个国产的好用东西:深度deepin-boot-maker. 下载地址(官方百度盘):点击下载 用起来也很简单,只需要选择下载好的 ...
- C++程序的目录结构、编译、打包、分发
管理C++的第三方库以及编译 第三方库这个说法,不知道出自哪里,但一般是指开发者,系统/平台提供商之外的第三个参与者提供的程序库. 大多数开源软件库在软件系统中都是第三方库. 完全不使用库的开发,在9 ...
- windows phone之山寨win8圆形进度条
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...
- small cell 在安防领域的应用探讨
在安防领域,最核心的问题是:如何有效区分“内部人员”与“外部人员”.所谓“有效”包含两点意思,一是安全,尽可能地过滤出“外部人员”.二是效率,即尽可能无干扰地或较小干扰地使“内部人员”通过.所有的安全 ...
- Qt绘制简单的风向玫瑰图代码
1.绘制简单的风向玫瑰图代码2.主要使用QPainter3.在子widget上绘制需要使用widget监视事件 eventfilter update();//更新界面 //镜头12 QPainter ...
- 使用 wget 下载需要 cookie 认证的网站
.使用火狐,安装 Export Cookies 插件 2.登录网站,点菜单"工具-Export Cookies..",保存 cookies.txt 到自己的文件夹 3.把 cookies.t ...
- Apple导出p12证书 导出证书为p12 Apple开发
1.原因说明 p12证书包含了我们的cer证书和私钥 这个证书可以当做我们开发凭证的备份 在我们更换开发机器的时候不需要再去Apple开发中心申请了 2.导出过程 2.1 打开钥匙串访问 2.2 选择 ...
- 20165219第4次实验《Android程序设计》实验报告
20165219第4次实验<Android程序设计>实验报告 一.实验内容及步骤 (一)Android Stuidio的安装Hello world测试 要求 参考http://www.cn ...