• JS实现跨域请求数据--jsonp


    * {
    margin: 0;
    padding: 0;
    }
    
    input {
     300px;
    height: 30px;
    border: 1px solid lightgray;
    margin-top: 150px;
    margin-left: 200px;
    padding-left: 5px;
    }
    
    ul {
     307px;
    list-style: none;
    margin-left: 200px;
    display: none;
    }
    
    li {
    height: 30px;
    border: 1px solid lightgray;
    line-height: 30px;
    padding-left: 5px;
    }
    

      

    <input type="text" id="inputSearch">
    <ul id="ulList">
    <li>123</li>
    </ul>
    

      

    <script>
    function callbackD(response) {
      console.log(response)
      var oUl = document.getElementById('ulList');
      var html = '';
      if(response.s.length != 0) {
        oUl.style.display = 'block';
        for(var i = 0; i < response.s.length; i++) {
          html += '<li>' + response.s[i] + '</li>'
        }
      }
      oUl.innerHTML = html;
    }
    </script>
    <script>
    window.onload = function() {
      //获取dom元素
      var oData = document.getElementById('inputSearch');
      var oUl = document.getElementById('ulList');
    
      //键盘按下后抬起触发事件(onkeyup)
      oData.onkeyup = function() {
        if(oData.value != '') {
          //创建标签(createElement)
          var script = document.createElement("script");
          //添加地址
          script.src = 'http://unionsug.baidu.com/su?wd=' + this.value + '&p=3&cb=callbackD';
          //添加给body的(成为body包涵的孩子)
    
          document.body.appendChild(script);
        } else {
          oUl.style.display = 'none';
        }
    
      }
    
    };
    </script>
    

      

  • 相关阅读:
    枚举类型的应用
    动手动脑
    四则运算和验证码--源码
    ATM源码
    javabean+jsp+servlet+jdbc
    四则运算改良
    Java异常
    课后总结
    包装类Integre
    对象验证
  • 原文地址:https://www.cnblogs.com/YAN-HUA/p/9754543.html
Copyright © 2020-2023  润新知