标签：click php empty enc javascrip 元素 java http value
动态创建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>
标签：click php empty enc javascrip 元素 java http value
原文地址：http://www.cnblogs.com/zhangzhongren/p/7834302.html
