AJAX成功后使旋钮加载

时间:2015-09-29 22:33:15

标签: javascript jquery html ajax

我希望在 ajax 调用完成后立即获得一个动画旋钮。我得到一个数字,旋钮应该progress到没有刷新。所以我想要的是:Ajax请求是成功的 - >将数字发送到旋钮功能 - >旋钮填满。

代码:

..

success: function(data) {
    knobload(data);
}

..

function knobLoad(data) {
   $('.knob').each(function () {

       var $this = $(this);
       $this.knob({

       });
       $({
           value: 0
       }).animate({

           value: data
       }, {
           duration: 2000,
           easing: 'swing',
           step: function () {
               $this.val(Math.ceil(this.value)).trigger('change');

           }
       })

   });
}
</script>
<input class="knob animated" value="0" readonly data-width="80%">

1 个答案:

答案 0 :(得分:0)

通过在ajax请求的文件中添加旋钮结束,然后显示它。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
      </script>
      <script type="text/javascript">
      $(document).ready(function() {
        $('#time_search').bind('submit', function() {
            var origin = $('#origin').val();
            var destination = $('#destination').val();
            alert(origin);

            $.ajax({
                type: "POST",
                url: "search_ODtime.php",
                data: 'origin=' + origin + '&destination=' + destination,
                success: function(data) {
                    $('#search_results').html(data);
                }
            });
        });
      });
      </script>
      </head>
      <fieldset style="font-size:11pt;  opacity: 1; color: white;">
        <form id="time_search">
          Orinig: 
          <input name="origin" id="origin" type="number" value="1" min="1" max="97">
          <br>
          Destination: 
          <input name="destination" id="destination" type="number" value="1" min="1" max="97">
          <br>

          <input type="submit" value="Get travel time" name="submit" id="submit" style="border-radius: 5px; display: block; margin: 10px auto 10px 0;">

        </form>
        Travel time:
        <div id="search_results">
        </div>
      </fieldset>
</body>
</html>

ajax文件:

        $.ajax({
                url: 'ajax.php',
                data: {
                    id: id

                },
                success: function(data) {
                    $('#knob').html(data);
                }
            });