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跨域请求实例详解的相关资料,需要的朋友可以参考下 ...
随机推荐
- 关于 Azure 安全性的 10 点提示
讨论云服务时,安全性是一个关键领域.实际上,Windows Azure 基础结构实施大量的技术和流程来保护环境.此页介绍 Microsoft 的全球基础服务如何运行基础结构以及它们实施的安全措施. 从 ...
- up6-chrome 45+安装教程
up6-Chrome 45+安装说明 说明:只需要安装up6.exe即可,up6.exe为插件集成安装包. 1.以管理员身份运行up6.exe.up6.exe中已经集成Chrome 45插件.
- Java IO输入输出流File 字节流
public static void main(String[] args) throws IOException { //创建源 File f =new File("file/stream ...
- 综合学生信息管理系统(JSP+JDBC)
原创 通过JSP+JDBC制作一个简单的操作数据库中表信息的系统. 总体界面如下,一共有5个功能块. 功能一:列出全部学生 功能二:按条件查询学生 功能三:新添加学生 功能四:按条件删除学生 功能五: ...
- php 文件、目录操作函数
目录 opendir readdir closedir mkdir rmdir : 只能删除空目录 文件 filetype filesize is_file basename dirname pat ...
- web.xml报错:cvc-complex-type.2.4.a: Invalid content was found starting with element 'async-supported'. One of '{"http://java.sun.com/xml/ns/javaee":init-param}' is expected.
在写xml的时候又一次总是报cvc-complex-type.2.4.a: Invalid content was found starting with element 错误,还出现小红叉,在网上找 ...
- Mysql初识数据库《一》下载安装Mysql
#1.下载:MySQL Community Server 5.7.16 http://dev.mysql.com/downloads/mysql/ #2.解压 如果想要让MySQL安装在指定目录,那么 ...
- day02.3-元组内置方法
元组——tuple的定义:test = (11,"alex",(22,33),[44,55],True) 特点:1. 元组是可迭代对象 2. 元组中元素是有序的,但其不可修改,也不 ...
- BST_insert
#include <stdio.h> /* printf, scanf, NULL */ #include <stdlib.h> /* malloc, free */ stru ...
- [51nod]1229 序列求和 V2(数学+拉格朗日差值)
题面 传送门 题解 这种颓柿子的题我可能死活做不出来-- 首先\(r=0\)--算了不说了,\(r=1\)就是个裸的自然数幂次和直接爱怎么搞怎么搞了,所以以下都假设\(r>1\) 设 \[s_p ...