jQuery Ajax 实现 &天气预报关键字查询自动填充等功能

最新推荐文章于 2024-09-04 18:00:00 发布

陈老说

最新推荐文章于 2024-09-04 18:00:00 发布

阅读量1.1k

点赞数 2

文章标签： jQuery AJAX JavaScript查询天气百度关键词 jQuery自动填充

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.csdn.net/weixin_40845165/article/details/123608652

版权

1、首先引入百度CSD

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
      <script src="//apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>

2、模拟百度关键字搜索

效果图：

具体实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
      <script src="//apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<input type="text" id="keyword" placeholder="请输入关键字"/>
<input type="button" id="btn" value="百度关键字"/>
<div class="box"></div>


<script>
    $(document).ready(function(){
        $("#btn").click(function(){
            var keyWord = $("#keyword").val();
            var obj={
                url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                data:{wd:keyWord},
                dataType: "jsonp",
                jsonp:"cb",
                success:function(data){
                    var list = "<ul>";
                    for(var i=0; i<data.s.length; i++){
                        var temp = data.s[i];
                        list += "<li>"+temp+"</li>";
                    }
                    list += "</ul>";
                    $(".box").html(list);
                }
            };
            $.ajax(obj);
        });
    });
</script>
</body>
</html>

3、自动填充

效果图：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>


  <script>
    $(function() {
      var names = [ "北京大学", "清华大学", "北京体育大学","北京理工大学" ];

      var accentMap = {
        "北": "b",

      };
      var normalize = function( term ) {
        var ret = "";
        for ( var i = 0; i < term.length; i++ ) {
          ret += accentMap[ term.charAt(i) ] || term.charAt(i);
        }
        return ret;
      };

      $( "#developer" ).autocomplete({
        source: function( request, response ) {
          var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
          response( $.grep( names, function( value ) {
            value = value.label || value.value || value;
            return matcher.test( value ) || matcher.test( normalize( value ) );
          }) );
        }
      });
    });
  </script>
</head>
<body>

<div class="ui-widget">
  <form>
    <label for="developer">学校：</label>
    <input id="developer">
  </form>
</div>


</body>
</html>

4、文上 2 + 3 功能结合源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>



</head>
<body>

<input id="developer" type="text"  placeholder="请输入关键字"/>
<input type="button" id="btn" value="百度关键字"/>
<div class="box"></div>


<script>
  $(document).ready(function(){
    $("#btn").click(function(){
      var keyWord = $("#developer").val();
      var obj={
        url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
        data:{wd:keyWord},
        dataType: "jsonp",
        jsonp:"cb",
        success:function(data){
          var list = "<ul>";
          for(var i=0; i<data.s.length; i++){
            var temp = data.s[i];
            list += "<li>"+temp+"</li>";
          }
          list += "</ul>";
          $(".box").html(list);
        }
      };
      $.ajax(obj);
    });
  });
</script>

<script>
  $(function() {
    var names = [ "北京大学", "清华大学", "北京体育大学","北京理工大学"];

    var accentMap = {
      "北": "b",

    };
    var normalize = function( term ) {
      var ret = "";
      for ( var i = 0; i < term.length; i++ ) {
        ret += accentMap[ term.charAt(i) ] || term.charAt(i);
      }
      return ret;
    };

    $( "#developer" ).autocomplete({
      source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
        response( $.grep( names, function( value ) {
          value = value.label || value.value || value;
          return matcher.test( value ) || matcher.test( normalize( value ) );
        }) );
      }
    });
  });
</script>
</body>
</html>

5、实现天气预报查询

效果图：

实现源码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<input type="text" id="tel"/>
<button id="ajax">天气预报</button>
<p><span id="reslut"></span></p>
<script src="//apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#ajax').on('click', function () {
            var $telValue = $('#tel').val();
            if ($telValue == "") {
                alert('不能为空！');
                return;
            }
            $.ajax({
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'getName',
                url: 'http://api.asilu.com/weather/',
                data: {
                    "city": $telValue
                },
                success: function (data) {
                    var reslutData = data;
                    console.log(reslutData);
                    $('#reslut').text(reslutData.city + "明天的天气:" + reslutData.weather[0].weather);
                },
            })
        })
    })
</script>
</body>
</html>

5、点击空白处冒字特效

<script src="//apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
  //定义获取词语下标
  var a_idx = 0;
  jQuery(document).ready(function($) {
    //点击body时触发事件
    $("body").click(function(e) {
      //需要显示的词语
      var a = new Array("富强","民主", "社会", "核心","价值", "诚信");
      //设置词语给span标签
      var $i = $("<span/>").text(a[a_idx]);
      //下标等于原来下标+1  余 词语总数
      a_idx = (a_idx + 1)% a.length;
      //获取鼠标指针的位置，分别相对于文档的左和右边缘。
      //获取x和y的指针坐标
      var x = e.pageX, y = e.pageY;
      //在鼠标的指针的位置给$i定义的span标签添加css样式
      $i.css({"z-index" : 999999,
        "top" : y - 20,
        "left" : x,
        "position" : "absolute",
        "font-weight" : "bold",
        "color" : "#DEB887"
      });
      //在body添加这个标签
      $("body").append($i);
      //animate() 方法执行 CSS 属性集的自定义动画。
      //该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
      //详情请看http://www.w3school.com.cn/jquery/effect_animate.asp
      $i.animate({
        //将原来的位置向上移动180
        "top" : y - 180,
        "opacity" : 0
        //1500动画的速度
      }, 1500, function() {
        //时间到了自动删除
        $i.remove();
      });
    });
  });

</script>