動態創建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>