动态创建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 实现跨域请求数据的更多相关文章

  1. js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...

  2. jquery 跨域请求数据问题

    昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题.当被问到用jquery跨 ...

  3. 使用JSONP跨域请求数据

    下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记.

  4. jquery跨域请求数据

    jquery跨域请求数据 jquery跨越请求数据.实际开发中经常会碰到两个网站数据交互问题,当向另一个站点请求数据该如何做? 实际上非常容易,请按照下面的步骤做: 第一:编写js,通过get获取远程 ...

  5. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  6. 关于试用jquery的jsonp实现ajax跨域请求数据的问题

    我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

  7. Ajax跨域请求数据实例（JSOPN方式）

    今天在做取消申请的时候遇到了一个跨域ajax提交的问题. 情景是: 系统A是asp.net的站点,其中包括一个取消申请的接口(get方式通过参数提交到系统的某一个页面,然后返回提交成功或失败) 系统B ...

  8. 手动创建script解决跨域问题（jsonp从入门到放弃）

    vue项目一般用axios代替jQuery发送ajax请求,但是不支持jsonp格式,需要安装jsonp的依赖包,这就很不爽了,能自己轻易实现的,为什么要引乱七八糟的插件.jsonp其实就是利用< ...

  9. jquery post跨域请求数据

    原先一直以为要实现跨域请求只能用jsonp,只能支持GET请求,后来了解到使用POST请求也可以实现跨域,但是需要在服务器增加Access-Control-Allow-Origin和Access-Co ...

随机推荐

  1. Jmeter脚本录制方法（一）——分别使用Badboy录制和Jmeter自带的代理服务器录制

    Jmeter录制方式分三种,分别是:使用Badboy录制.Jmeter自带的代理服务器录制和手工录制,今天先介绍前两种录制方法. Badboy录制 Badboy是用C++开发的动态应用测试工具, 其拥 ...

  2. M-自适应宽高样式

    1 绝对定位 position: absolute; top: 0px; bottom: 0px; left: 0px; width: 100%; overflow: hidden;

  3. Java API 常用类（一）

    Java API 常用类 super类详解 "super"关键字代表父类对象.通过使用super关键字,可以访问父类的属性或方法,也可以在子类构造方法中调用父类的构造方法,以便初始 ...

  4. 从给数组中的对象去重看Javascript中的reduce()

    假设有这样一个数组: let person = [ {id: 0, name: "小明"}, {id: 1, name: "小张"}, {id: 2, name ...

  5. Extjs6随笔（终篇）——内容总结

    上个月和Extjs说byebye了,以后大概也没机会用了.之前的博客有点乱,大家看着比较麻烦,所以趁着我还没忘,在这里总结一下♪(^∇^*) 写了个demo,传到git上了,有需要可以自取.Extjs ...

  6. 前端工程化grunt

    1.grunt是什么? grunt是基于nodejs的前端构建工具.grunt用于解决前端开发的工程问题. 2.安装nodejs Grunt和所有grunt插件都是基于nodejs来运行的. 安装了n ...

  7. [NOIP2014][DP]飞扬的小鸟

    [NOIP2014]飞扬的小鸟 ——!x^n+y^n=z^n 题目描述: Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画 ...

  8. Python读取SQLite文件数据

    近日在做项目时,意外听说有一种SQLite的数据库,相比自己之前使用的SQL Service甚是轻便,在对数据完整性.并发性要求不高的场景下可以尝试! 1.SQLite简介: SQLite是一个进程内 ...

  9. JavaScript--我发现，原来你是这样的JS（再说引用类型，基本包装类型与个体内置对象）

    一.介绍 本篇是续上一篇的,引用类型的后篇,本篇主要是说基本包装类型和个体内置对象.如果你能收获一些知识,那我很高兴,很满足,哈哈哈,希望大家能愉快看完.如果你想学好一门技术,要不忘初心,方得始终. ...

  10. Dagger2 入门解析

    前言 在为dropwizard选择DI框架的时候考虑了很久.Guice比较成熟,Dagger2主要用于Android.虽然都是google维护的,但Dagger2远比guice更新的频率高.再一个是, ...