动态创建 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>

 

 

 

posted @ 2017-11-14 19:53  中学二年级  阅读(5942)  评论(0)  编辑  收藏  举报