动态创建 script 实现跨域请求数据
动态创建script标签 (由事件触发)
在我们需要请求数据的时候我们就可以动态的创建 script 标签 src设置为我们需要请求数据的地址 另外我们可以附加参数 ？后面附加参数 例如 ：？参数=1&callbacl=cb 我们还可以指定回调函数 回调函数就是我们在得到数据之后需要做什么处理
给这个函数传一个参数 即我们想要的数据
btn.onclick=function(){
var value = numbers.value; // 必须在点击事件之后获取 这样或取得才是当前的 值
var script = document.createElement("script"); // 穿件一个script 标签
script.src = "http://10.80.1.23/PHP/ajax/logistics/logistics.php?kuaidi_id="+value+"&callback=show"; // 把script的src设置为我们请求数据的地址并传递参数 和回调函数
document.body.appendChild(script); // 把script 插入到body里面
}
这里提到一点问题 就是我们的scrript 标签是动态的插入到body的末尾的 如果你的script事写在body下面的 而这时 刚好 你是在 callback函数外面获取的页面元素 在callback里面进行操作就会完全无效
解决办法 就是 把你的 script也写在body里面 或者 在callback里面获取元素并进行操作。
php文件是怎么样的呢 大概就是这样的
<?php
$kuaidi = array();
$kuaidi["1000"] = array(
"info" => '王小三的快递',
'status' => '配送中',
);
$kuaidi["1001"] = array(
"info" => '王三的快递',
'status' => '配送中',
);
$kuaidi["1002"] = array(
"info" => '张三的快递',
'status' => '已配送',
);
/* * 传送方式 GET
* 参数 kuaidi_id 需要查询的快递单号
* callback 回调函数名
* */
if(!empty($_GET["kuaidi_id"])){
//如果没有传回调函数
if(empty($_GET["callback"])){
echo json_encode($kuaidi[$_GET["kuaidi_id"]]);
}else{
//如果有回调函数 那么输出 jsonp
echo $_GET["callback"]."(".json_encode($kuaidi[$_GET["kuaidi_id"]]).")";
}
}
?>
完整的html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" name="number" id="number" value="" />
<p id="info"></p>
<input type="button" name="" id="btn" value="查询" /> <script type="text/javascript">
var btn = document.getElementById("btn");
var numbers = document.getElementById("number");
var info = document.getElementById("info");
btn.onclick=function(){
var value = numbers.value;
var script = document.createElement("script");
script.src = "http://10.80.1.23/PHP/ajax/logistics/logistics.php?kuaidi_id="+value+"&callback=show";
document.body.appendChild(script);
}
function show(val){ // 插入数据
info.innerText ="姓名:" + val.info + " 状态:" + val.status;
}
</script>
</body> </html>
动态创建 script 实现跨域请求数据的更多相关文章
- js跨域请求数据的3种常用的方法
由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript 在 ...
- jquery 跨域请求数据问题
昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题.当被问到用jquery跨 ...
- 使用JSONP跨域请求数据
下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记.
- jquery跨域请求数据
jquery跨域请求数据 jquery跨越请求数据.实际开发中经常会碰到两个网站数据交互问题,当向另一个站点请求数据该如何做? 实际上非常容易,请按照下面的步骤做: 第一:编写js,通过get获取远程 ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- 关于试用jquery的jsonp实现ajax跨域请求数据的问题
我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...
- Ajax跨域请求数据实例（JSOPN方式）
今天在做取消申请的时候遇到了一个跨域ajax提交的问题. 情景是: 系统A是asp.net的站点,其中包括一个取消申请的接口(get方式通过参数提交到系统的某一个页面,然后返回提交成功或失败) 系统B ...
- 手动创建script解决跨域问题（jsonp从入门到放弃）
vue项目一般用axios代替jQuery发送ajax请求,但是不支持jsonp格式,需要安装jsonp的依赖包,这就很不爽了,能自己轻易实现的,为什么要引乱七八糟的插件.jsonp其实就是利用< ...
- jquery post跨域请求数据
原先一直以为要实现跨域请求只能用jsonp,只能支持GET请求,后来了解到使用POST请求也可以实现跨域,但是需要在服务器增加Access-Control-Allow-Origin和Access-Co ...
随机推荐
- Array Partition I
Given an array of 2n integers, your task is to group these integers into n pairs of integer, say (a1 ...
- VB.NET 中 ComboBox 如何清除选项--- 使用Dataset 赋值 DataSource 的时候
如题: 在 使用Dataset 赋值 DataSource 的时候,网络上很多都是:ComboBox2.DataSource = Null 然并卵,很高兴告诉大家:Null 在VB.NET中是没用的: ...
- Asp.net MVC4高级编程学习笔记-视图学习第三课Razor页面布局20171010
Razor页面布局 1) 在布局模板页中使用@RenderBody标记来渲染主要内容.比如很多web页面说头部和尾部相同,中间内容部分使用@RenderBody来显示不同的页面内容. 2) 在布局 ...
- 简单Elixir游戏服务器开篇
以前的Elixir游戏服设计系列种种原因没有完成. 后来虽然用Elixir + riak 完成了一个麻将的初始版本,可惜公司也挂了. 现在到新公司,比较空闲,想着像完成一个心愿一样,还是重启下吧(希望 ...
- 轻量级文本编辑器，Notepad最佳替代品：Notepad++
目录 正文之前 1. 目的 2. 原帖 3. 为何推荐Notepad++ 3.1. Notepad++的一些基本特点 3.2. notepad,notepad2,notepad++,ultraEdit ...
- C#直接发送打印机命令到打印机及ZPL常用打印命令 - 条码打印机
using System; using System.Collections.Generic; using System.Text; using System.Runtime.InteropServi ...
- Telerik RadGridView动态增删行及行列操作
最近使用一直使用第三方控件Telerik,版本 2011 Q1,一直使用显示控件RadGridView,使用起来比DataGird好使, 也发现有控件问题. 1.增行 RadGridView中使用Be ...
- 3.ElasticSearch的倒排索引
一. 正向索引 常规的索引建立方式 文档---> 关键词的映射过程(正向索引) 比如: 我有很多个文章,如果想查询其中几个文章是否含有刘耀这个关键词,那么我就需要打开所以文章,找到里面含义刘耀的 ...
- mysql执行sql脚本
最近用mysql执行sql脚本,遇到一些问题,顺便记录一下笔记. 首先,先开启mysql服务,创建一个空数据库(脚本里没有创建数据库) 执行脚本有两个方法 1.未连接数据库:在Windows下使用cm ...
- jfinal使用jstl表达的存在的问及解决
问题 使用jstl 的el表达式 传递数据刷新页面,页面数据不显示,经过验证,数据的确传递过去,但是官方文档并没有详细描述,getModel() 不需要设get set() ,但是使用jstl el表 ...