ホームページ ウェブフロントエンド jsチュートリアル jQuery AJAX は、refresh_jquery を使用せずにドロップダウン読み込みを実装します

jQuery AJAX は、refresh_jquery を使用せずにドロップダウン読み込みを実装します

May 16, 2016 pm 03:51 PM
ajax jquery

インターネット時代の発展に伴い、Web フロントエンドは、単に画像を切り取ったり、HTML、CSS、単純な JS インタラクションを記述したりするだけではなく、バックグラウンド データとリンクするようになりました。

js コード

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

$(function() {

  var page = 1;

  var discount = $('#discount');

  var innerHeight = window.innerHeight;

  var timer2 = null;

  $.ajax({

    url: '/lightapp/marketing/verify/apply/list?page=1',

    type: 'GET',

    dataType: 'json',

    timeout: '1000',

    cache: 'false',

    success: function (data) {

        if (data.error_code === 0) {

          var arrText = [];

          for (var i = 0, t; t = data.list[i++];) {

            arrText.push('<div class="consume-whole">');

            arrText.push('<h3>' + t.title + '</h3>');

            if (t.coupon_type == 1 ) {

              arrText.push('<p>金额:¥' + t.amount + '</p>');

            } else {

              arrText.push('<p>优惠:' + t.amount + '</p>');

            }

            arrText.push('<p><span class="hx-user">用户:s账户飒飒是是是啊啊12' + t.user_name +'</span>' + '<span>核销时间:' + t.use_time + '</span></p>');

            arrText.push('</div>');

          }

          discount.html(arrText.join(''));

        };

        var ajax_getting = false; 

        $(window).scroll(function() {

          clearTimeout(timer2);

          timer2 = setTimeout(function() {

            var scrollTop = $(document.body).scrollTop();  

            var scrollHeight = $('body').height();  

            var windowHeight = innerHeight;

            var scrollWhole = Math.max(scrollHeight - scrollTop - windowHeight);

            if (scrollWhole < 100) {

              if (ajax_getting) {

                return false;

              } else {

                ajax_getting = true;

              }

              discount.append('<div class="load"><img src="/lightapp/static/zhida-yunying/img/load.gif" width="6%" /></div>');

              $('html,body').scrollTop($(window).height() + $(document).height());

              page++;

              $.ajax({

                url: '/lightapp/marketing/verify/apply/list?page=' + page,

                type: 'GET',

                dataType: 'json',

                success: function (data) {

                  if (data.error_code === 0) {

                    var arrText = [];

                    for (var i = 0, t; t = data.list[i++];) {

                      arrText.push('<div class="consume-whole"><a href="/lightapp/marketing/verify/page/info?rule_id=' + t.rule_id + '&coupon_id='+ t.coupon_id +'">');

                      arrText.push('<h3>' + t.title + '</h3>');

                      if (t.coupon_type == 1 ) {

                         arrText.push('<p>金额:¥' + t.amount + '</p>');

                      } else {

                        arrText.push('<p>优惠:' + t.amount + '</p>');

                      };

                      arrText.push('<p><span class="hx-user">用户:账户飒111111111' + t.user_name +'</span>' + '<span>核销时间:' + t.use_time + '</span></p>');

                      arrText.push('</a></div>');

                    }

                    discount.append(arrText.join(''));

                    $(".load").remove();

                  } else {

                    $(".load").remove();

                    discount.append('<div class="no-data">没有更多数据。</div>');

                    $(window).unbind('scroll');

                  };

                  ajax_getting = false;

                }

              });  

            };

            $(".load").remove();

          }, 200);

        });

        if (data.error_code == 156006) {

          $('.coupon').html('<div class="error"><h2>出错啦!</h2><p>原因:未登录</p></div>')

        };

        if (data.error_code == 156003) {

          $('.coupon').html('<div class="error"><h2>出错啦!</h2><p>原因:权限不足~请补充</p></div>')

        };

        if (data.error_code == 156007) {

          $('.coupon').html('<div class="error"><h2>出错啦!</h2><p>原因:服务异常</p></div>')

        };

        if (data.error_code == 511) {

          $('.coupon').html('<div class="error"><h2>出错啦!</h2><p>原因:账号未开通直达号</p></div>')

        };

        if (data.error_code == 520) {

          $('.coupon').html('<div class="stays"><span></span><p>暂无核销记录</p></div>')

        }

 

      },

      error: function (data) {

 

      }

  })

  $(window).bind("orientationchange", function() {

    $('.sliders').css('left',$(window).width() / 2 +'px');

  })

})

ログイン後にコピー

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか?

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する

jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

jQuery を使用してすべての a タグのテキスト コンテンツを変更する

PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション Jun 06, 2024 pm 01:12 PM

PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション

jQuery における eq の役割と応用シナリオを理解する jQuery における eq の役割と応用シナリオを理解する Feb 28, 2024 pm 01:15 PM

jQuery における eq の役割と応用シナリオを理解する

PHP と Ajax: Ajax のセキュリティを向上させる方法 PHP と Ajax: Ajax のセキュリティを向上させる方法 Jun 01, 2024 am 09:34 AM

PHP と Ajax: Ajax のセキュリティを向上させる方法

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?

See all articles