JSONP学习笔记

来源：互联网发布：淘宝上印度德玛药房编辑：程序博客网时间：2024/06/13 05:30

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>function fn1(data) {var oUl1 = document.getElementById('ul1');var html = '';for (var i=0; i<data.length; i++) {html += '<li>'+data[i]+'</li>';}oUl1.innerHTML = html;}function fn2(data) {var oUl2 = document.getElementById('ul2');var html = '';for (var i=0; i<data.length; i++) {html += '<li>'+data[i]+'</li>';}oUl2.innerHTML = html;}function fn3(data) {var oUl3 = document.getElementById('ul3');var html = '';for (var i=0; i<data.length; i++) {html += '<li>'+data[i]+'</li>';}oUl3.innerHTML = html;}</script><script>window.onload = function() {var oBtn1 = document.getElementById('btn1');var oBtn2 = document.getElementById('btn2');oBtn1.onclick = function() {var oScript = document.createElement('script');oScript.src = 'getData.php?callback=fn1';document.body.appendChild(oScript);}var oBtn2 = document.getElementById('btn2');oBtn2.onclick = function() {var oScript = document.createElement('script');oScript.src = 'getData.php?t=str&callback=fn2';//传递了两个参数document.body.appendChild(oScript);}var oBtn3 = document.getElementById('btn3');oBtn3.onclick = function() {var oScript = document.createElement('script');oScript.src = 'getData.php?callback=fn3';document.body.appendChild(oScript);}}</script></head><body><input type="button" id="btn1" value="加载数字" />    <ul id="ul1"></ul>    <input type="button" id="btn2" value="加载字母" />    <ul id="ul2"></ul>    <input type="button" id="btn3" value="加载字母" />    <ul id="ul3"></ul></body></html>

getData.php文件中的内容：

<?php$t = isset($_GET['t']) ? $_GET['t'] : 'num';//接受一个参数t,赋值给$t,如果没有t，将num赋值给$t$callback = isset($_GET['callback']) ? $_GET['callback'] : 'fn1';//接受一个参数callback，赋值给$callback,如果没有，则将fn1赋值给$callback$arr1 = array('111111','22222222','33333333','4444444','555555555555555555555');$arr2 = array('aaaaaaaaaaaa','bbbbbbbb','cccccccccccc','ddddddddd','eeeeeeeeeeee');if ($t == 'num') {$data = json_encode($arr1);} else {$data = json_encode($arr2);}echo $callback.'('.$data.');';

利用百度数据库，进行搜索提示：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}#ul1 {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}li a:hover{ background: #f90; color: white; }</style><script>function miaov(data) {var oUl = document.getElementById('ul1');var html = '';if (data.s.length) {oUl.style.display = 'block';for (var i=0; i<data.s.length; i++) {html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';}oUl.innerHTML = html;} else {oUl.style.display = 'none';}}window.onload = function() {var oQ = document.getElementById('q');var oUl = document.getElementById('ul1');oQ.onkeyup = function() {if ( this.value != '' ) {var oScript = document.createElement('script');oScript.src = 'https://www.baidu.com/su?&wd='+this.value+'&cb=miaov';document.body.appendChild(oScript);} else {oUl.style.display = 'none';}}}</script></head><body><input type="text" id="q" /><ul id="ul1"></ul></body></html>

使用jQuery的ajax():

<!DOCTYPE HTML>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>无标题文档</title>  <style>  #q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}  #ul1 {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}  li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}  li a:hover{ background: #f90; color: white; }  </style>  <script src="jquery-2.0.3.js"></script><script>  window.onload = function() {        var oQ = document.getElementById('q');      var oUl = document.getElementById('ul1');            oQ.onkeyup = function() {            _this = this        if ( this.value != '' ) {  //          var oScript = document.createElement('script');  //          oScript.src = 'https://www.baidu.com/su?wd='+this.value+'&cb=miaov';  //          document.body.appendChild(oScript);              $.ajax({            type:"get",            url:"https://www.baidu.com/su?wd=" + _this.value,            dataType:"jsonp",            jsonp:"cb",            jsonpCallback:"miaov",            async:false,            success:function (data) {        var oUl = document.getElementById('ul1');      var html = '';      if (data.s.length) {          oUl.style.display = 'block';          for (var i=0; i<data.s.length; i++) {              html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';          }          oUl.innerHTML = html;      } else {          oUl.style.display = 'none';      }       }            });        } else {              oUl.style.display = 'none';          }                }      }  </script>  </head>    <body>      <input type="text" id="q" />      <ul id="ul1"></ul>  </body>  </html>

阅读全文

0 0