JSONP实例

关于JSON和JSONP，网上已经有很多文章有介绍了，在这里我只贴出来两个应用实例。

html代码:

<div id="wrapper">
    <div id="searchBar">
        <input type="text" maxlength="50" id="input">
        <span id="btn">
          <input type="button" value="搜索一下" onclick="doSearch()">
        </span>
    </div>
    <p id="title">搜索结果：</p>
 </div>

css代码:

<style>
      body {
        margin: 0;
        padding: 0;
      }
      #wrapper {
        text-align: center;
        padding-top: 100px;
      }
      #searchBar {
        display: inline-block;
      }
      #input {
        width: 300px;
        height: 20px;
        padding: 9px 7px;
        border: 1px solid #b8b8b8;
        border-right: 1px solid #38f;
        outline: none;
        vertical-align: top;
      }
      #btn {
        border: 1px solid #38f;
        margin-left: -5px;
        display: inline-block;
        vertical-align: top;
      }
      #btn input {
        width: 102px;
        height: 38px;
        border: none;
        background: #38f;
        cursor: pointer;
        font-size: 14px;
        color: #fff;
      }
      #btn input:hover {
        background-color: #317ef3;
        border-color: #317ef3;
      }
      #title {
        font-size: 12px;
      }
      ul {
        list-style: none;
      }
      li {
        padding: 10px 0;
      }
    </style>

• 实例一：原生js通过script跨域请求数据

<script>
        //数据查询主函数
      function doSearch() {
        var input = document.getElementById('input');
        var inputVal = input.value;
        //inputVal:查询参数; getJsonp:后台返回的函数名
        var url = "https://suggest.taobao.com/sug?code=utf-8&q="+inputVal+"&callback=getJsonp";
        var script = document.createElement('script');
        script.setAttribute('src', url);
        document.getElementsByTagName('head')[0].appendChild(script);
      }
      //声明 数据解析函数
      var getJsonp = function(data) {
        var wrapper = document.getElementById('wrapper');
        var oldUl = document.getElementsByTagName('ul')[0];
        if (oldUl) {
          oldUl.parentNode.removeChild(oldUl);
        }
        var Ul = document.createElement('ul');
        var result = data.result;
        if (result.length) {
          for (var i = 0; i < result.length; i++) {
            var Li = document.createElement('li');
            Li.innerHTML = result[i][0] + '的条数有：'+ result[i][1] + '条';
            Ul.appendChild(Li);
          }
        } else {
          var Li = document.createElement('li');
          Li.innerHTML = '搜索结果为空！';
          Ul.appendChild(Li);
        }
        wrapper.appendChild(Ul);
      };

      var input = document.getElementById('input');
      // input.addEventListener('change', function(e) {
      //   console.log(e.target.value);
      // });
      input.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
          doSearch();
        }
      })
    </script>

---

• 实例二：通过jQuery的$.ajax()方法跨域请求数据

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
......
<script>
        //数据查询主函数
      function doSearch() {
        var inputVal = $('#input').val();
        $.ajax({
          url: "https://suggest.taobao.com/sug?code=utf-8&q="+inputVal+"&callback=getJsonp",
          type: 'GET',
          dataType: 'jsonp',
          success: function(data) {
            getJsonp(data)
          }
        });
      }
      var getJsonp = function(data) {
        $('#wrapper').children('ul').remove();
        $('#wrapper').append('<ul></ul>');
        var result = data.result;
        if (result.length) {
          for (var i = 0; i < result.length; i++) {
              //es6写法可能导致浏览器不支持
            $('ul').append(`<li>${result[i][0]}的条数有：${result[i][1]}条</li>`)
          }
        }
      };

      $('#input').bind('keydown', function(e) {
        if (e.key === 'Enter') {
          doSearch();
        }
      })
    </script>

推荐一个很nice的网页：免费数据接口，里面有各种类型的接口可供调用测试。