美文网首页
利用script标签跨域

利用script标签跨域

作者: 小飞侠zzr | 来源:发表于2017-11-14 20:19 被阅读0次

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");
//动态创建 script标签 并且设置获取数据的地址 发送参数 设置执行回调函数 插入到body里面
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>

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"]]).")";
}
}
?>

相关文章

  • 跨域JSONP实质与JavaScript实现

    跨域JSONP实质与JavaScript实现 实质 利用script标签的src属性(浏览器允许script标签跨...

  • 跨域(其中之四)

    一. 通过JSONP跨域 利用script标签不受同源策略的影响的特性,在页面中动态插入script标签。scri...

  • 利用script标签跨域

    HTML文件内容 var btn = document.ge...

  • 跨域的三种实现方法

    用JSONP实现跨域 原理: 利用 script 标签引用JS文件时不受是否跨域的影响,在后端支持的情况下,实现跨...

  • 跨域

    跨域:ajax 不能跨域img css script 标签 可以跨域例如:《img src="images/...

  • 4-1使用jsonp解决跨域

    1、通过静态的script标签的src属性进行跨域请求 2、通过动态的script标签的src属性进行跨域请求

  • 详解jsonp跨域原理

    利用 页面上 script 标签可以跨域,并且其 src 指定的js脚本到达浏览器会执行的特性,我们可以进行跨域取...

  • 常见跨域解决方案

    目前常见的跨域解决方案 Jsonp最早的解决方案,利用script标签可以跨域的原理实现限制: 需要服务的支持 只...

  • 结合Promise 封装JSONP方法

    jsonp jsonp是一种前端开发中跨域的解决方案。利用了script 标签可以跨域请求的特性。实现步骤: 1....

  • 什么是JSONP

    概念 JSONP全称JSON with Padding,是一种跨域请求资源的方法。 利用HTML的script标签...

网友评论

      本文标题:利用script标签跨域

      本文链接:https://www.haomeiwen.com/subject/xdtqvxtx.html