JQuery的基础教程

第六章：通过Ajax发送请求

操作案例：通过点击不同的按钮，触发ajax请求，获取不同的数据

html代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="jquery-3.4.1.js"></script>

</head>

<body style="width: 1000px; margin: 0 auto;">

      <script>

      </script>

      <h1 style="margin: 0 auto;">The Devil's Dictionary</h1>

      <span>by Ambrose Bierce</span>

      <br>

      <br>

      <br>

      <div class="letters" style="float: left;width:200px;">

        <div class="letter" id="letter-a">

            <h3><a href="entries-a.html">A</a></h3>

        </div>

        <div class="letter" id="letter-b">

            <h3><a href="entries-b.html">B</a></h3>

        </div>

        <div class="letter" id="letter-c">

            <h3><a href="entries-c.html">C</a></h3>

        </div>

        <div class="letter" id="letter-d">

            <h3><a href="entries-d.html">D</a></h3>

        </div>

      </div>

      <div id="dictionary"  style="float: left; width:800px">

      </div>

</body>

</html>

开始的效果

1.通过点击A,获取HTML页面的代码,

   　　　　　　$('#dictionary').hide().load('a.html',function(){
           　　　　　　　　     $(this).fadeIn('slow');
            　　　  });
 对应的js代码
 //1.直接获取html文件

           $('#letter-a a').click(function(event){

              event.preventDefault();

              //先隐藏目标元素，然后开始加载，

              //当加载完成时，又通过回调函数以淡出的方式逐渐显示出新生的元素

              $('#dictionary').hide().load('a.html',function(){

                $(this).fadeIn('slow');

              });

            //   $.ajax({

            //     url:"a.html"

            //   })

            //   alert("Loaded");

           });

         //.ajaxStart()和.ajaxStop()事件

            //加载反馈系统就位，a的.load（）和b的.getJSON()都可以导致反馈操作发生

            var $loading=$('<div id="loading">Loading</div>').insertBefore('#dictionary');

            $(document).ajaxStart(function(){

                $loading.show();

            }).ajaxStop(function(){

                $loading.hide();

            })

            //看起来一切正常，但是在现有代码的基础上单击没有结果

            //因为在单击时，词条还没有被添加到文档中，

            //通过Ajax生成页面内容时常见的问题

            $('h3.term').click(function(){

                $(this).siblings('.definition').slideToggle();

            });

            //值得推荐的做法：事件委托

            //.on()告诉浏览器密切关注页面上发生的任何单击事件。

            //当被点击的元素与h3.term选择符匹配时，才会执行事件处理程序

            $('body').on('click','h3.term',function(){

                $(this).siblings('.definition').slideToggle();

            })

对应的a.html代码

<div class="entry">

    <h3 class="term">

        ABDICATION

    </h3>

    <div class="part">n.</div>

    <div class="definition">

        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis impedit

    </div>

    <div class="quote">

        <div class="quote-line">

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eos,

        </div>        <div class="quote-line">

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eos,

        </div>        <div class="quote-line">

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eos,

        </div>        <div class="quote-line">

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eos,

        </div>        <div class="quote-line">

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eos,

        </div>

        <div class="quote-line">

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eos,

        </div>

        <div class="quote-author">G.J.</div>

    </div>

</div>

<div class="entry">

    <h3 class="term">ABSOLUTE</h3>

    <div class="part">adj.</div>

    <div class="definition">

        Lorem, ipsum dolor sit amet consectetur adipisicing elit.

         Ducimus incidunt soluta at laborum nam optio accusantium

          dignissimos consequatur perferendis mollitia est necessi

          tatibus ullam, dolorem provident recusandae delectus quis

          inventore enim.

        Quos consequuntur error facere dolores voluptas eum adipisci

        quod asperiores rerum nam, enim nisi quae. Ipsa quisquam deleniti

         perspiciatis nulla sed. Ratione numquam officia ipsam, debitis

          beatae deleniti illo neque.

        Mollitia necessitatibus corporis fugit voluptatibus earum.

         Voluptas quod modi aperiam, eum voluptate aliquam possimus

         . Architecto voluptatem sed sunt rem quae perferendis sapiente

          tempora, mollitia, enim debitis aspernatur rerum, asperiores nobis!

    </div>

</div>

　

获取html页面对应的效果

2.通过点击B,获取JSON格式数据      $.getJSON('b.json',function(){});

对应jS代码

   //2.获取json格式的文件，并对文件进行解析

           $("#letter-b a").click(function(event){

               event.preventDefault();

               //json规定：所有的对象键以及所有的字符串值，都必须包含在双引号中

               //   $.getJSON()称为类方法，全局方法，

               //第二个参数是当加载完成时调用的函数。

               $.getJSON('b.json',function(data){

                var html="";

                //$.each()不操作jQuery对象，它以数组或对象作为第一个参数，

                //以回调函数作为第二个参数，

                //每次循环要将数组或对象的当前索引和当前索引项作为回调函数的两个参数

                $.each(data,function(entryIndex,entry){

                    html += '<div class="entry">';

                    html += '<h3 class="term">'+entry.term+'</h3>';

                    html += '<div class="entry">'+entry.part+'</div>';

                    html += '<div class="definition">';

                    html += entry.definition;

                    if(entry.quote){

                            html+='<div class="quote">';

                            $.each(entry.quote,function(lineIndex,line){

                                html+='<div class="quote-line">'+line+'</div>';

                            });

                            if(entry.author){

                            html+='<div class="quote-author">'+entry.author+'</div>';

                    }

                    html += '</div>';

                    }

                    html += '</div>';

                    html += '</div>';

                });

                $('#dictionary').html(html);

               })

               //$.get()和.load()等快捷的Ajax方法并没有提供错误的回调函数

               //可以使用全局的.ajaxError()方法，还可以利用JQuery的延迟对象系统

               .fail(function(jqXHR){

                //status包含了服务器返回的状态码：

                //  400:  请求语法错误

                //  401： 为授权

                //  403：  禁止访问

                //  404：  未发现请求的URL

                //  500:  服务器内部的错误

                  $("#dictionary").html('An error occurred:'+jqXHR.status).append(jqXHR.responseText);

               });

           });

对应的json代码：b.json

[

    {

        "term":"BACCHUS",

        "part":"n.",

        "definition":"A convenient deity invented by the....",

        "quote":[

            "Is public worship,then,a sin,",

            "That for devotions paid to Bacchus",

            "The licitors dare to run us in,",

            "And resolutely thump andwhach us?"

        ],

        "author":"Jorace"

    },

    {

        "term":"BEARD",

        "part":"v.t.",

        "definition":"To speak of a man as you find him when..."

    },

    {

        "term":"BEARD",

        "part":"n.",

        "definition":"The hair that is commonly cut off by..."

    }

]

对应的效果

3.    获取js文件   $.getScript('c.js');

对应的js代码

//加载.js文件

           $('#letter-c a').click(function(){

                event.preventDefault();

                $.getScript('c.js');

           });


对应的js文件




var entries=[

    {

        "term":"CALAMITY",

        "part":"n.",

        "definition":"A more than commonly plain and...."

    },

    {

        "term":"CANNIBAL",

        "part":"n.",

        "definition":"A gastronome of the old school who...."

    }

    ,

    {

        "term":"CHILDHOOD",

        "part":"n.",

        "definition":"The period of human life intermediate...."

    }

];

var html="";

$.each(entries,function(){

     html+='<div class="entry">';

     html+='<h3 class="term">'+this.term+'</h3>';

     html+='<div class="part">'+this.part+'</div>';

     html+='<div class="definition">'+this.definition+'</div>';

     html+='</div>';

});

$('#dictionary').html(html);




对应的效果




4.  加载xml文档      $.get('d.xml',function(){})


对应的js代码




 $('#letter-d a').click(function(){

            event.preventDefault();

            $.get('d.xml',function(data){

                $('#dictionary').empty();

                    var html='<div class="entry">';

                    $(data).find("entry").each(function(){

                        var $entry=$(this);

                        var html='<div class="entry">';

                        html+='<h3 class="term">'+$entry.attr('term')+'</h3>';

                        html+='<div class="part">'+$entry.attr('part')+'</div>';

                        html+='<div class="definition">';

                        html+=$entry.find('definition').text();

                        var $quote=$entry.find('quote');

                        if($quote.length){

                            html+='<div class="quote">';

                                $quote.find('line').each(function(){

                                    html+='<div class="quote-line">';

                                    html+=$(this).text()+"</div>";

                                });

                                if($quote.attr('author')){

                                    html+='<div class="quote-author">';

                                    html+=$quote.attr('author')+'</div>';

                                }

                                html+='</div>';

                        }

                        html+='</div>';

                        html+='</div>';

                        $('#dictionary').append($(html));

              });

            });

         });
            




对应的xml文档




<?xml version="1.0" encoding='UTF-8'?>

<entries>

   <entry term='DEFAME' part='v.t.'>

      <definition>

         To lie about another. To tell the truth about another

      </definition>

   </entry>

    <entry term='DEFENCELESS' part='adj.'>

      <definition>

        Unable to attack

      </definition>

   </entry>

    <entry term='DELUSION' part='n.'>

      <definition>

          The father of a most respectable family.

          comprising Enthusiasm,Affection,Self-denial,Faith,Hope

          ,Charity and many other goodly sons and daughters

      </definition>

      <quote author="Munfrey Mappel">

          <line>

            All hail,Delusion! Were it not for three

          </line>

          <line>

            The world turned topsy-turvy we should see;

          </line>

          <line>

             For Vice, respectable with cleanly fancies

          </line>

          <line>

            Would fiy abandoned Virtue's gross advances.

          </line>

      </quote>

   </entry>

</entries>




对应的效果


												


											
JQuery通过Ajax发送数据的更多相关文章
	

    
						
  1. jQuery——通过Ajax发送数据
		
    Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML),一个Ajax解决方案涉及如下技术: JavaScript:处理与用户及其他浏览器相关事件的 ...
    
		
    2. 
						
  2. Django进阶（路由系统、中间件、缓存、Cookie和Session、Ajax发送数据
		
    路由系统 1.每个路由规则对应一个view中的函数 url(r'^index/(\d*)', views.index), url(r'^manage/(?P<name>\w*)/(?P&l ...
    
		
    3. 
						
  3. jquery通过ajax获取数据，控制显示的数据条数
		
    效果图: 现在我们可以先看它的json数据,如图所示:                然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...
    
		
    4. 
						
  4. jQuery的Ajax请求数据时type无法使用GET
		
    写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...
    
		
    5. 
						
  5. Jquery 等待ajax返回数据loading控件ShowLoading组件
		
    1.意义 开发项目中,前台的页面要发请求到服务器,服务器响应请求返回数据到前台,这段时间,有可能因为返回的数据量较大导致前台页面出现短暂性的等待,此时如果用户因不知情而乱点击有可能造成逻辑混乱,所以此 ...
    
		
    6. 
						
  6. jQuery创建ajax关键词数据搜索
		
    在web开发过程当中,我们经常需要在前台页面输入关键词进行数据的搜索,我们通常使用的搜索方式是将搜索结果用另一个页面显示,这样的方式对于搭建高性能网站来说不是最合适的,今天给大家分享一下如何使用 jQ ...
    
		
    7. 
						
  7. jquery 之ajax获取数据
		
    $.ajax({    url: "http://www.hzhuti.com",    //请求的url地址    dataType: "json",   / ...
    
		
    8. 
						
  8. jquery通过ajax查询数据动态添加到select
		
    function addSelectData() { //select的id为selectId //清空select中的数据 $("#selectId").empty(); $.a ...
    
		
    9. 
						
  9. django_forms组件用ajax发送数据验证注册
		
    forms组件 -forms是什么? 就是一个类,可以校验字段(前台传过来的字段) -怎么用: -校验字段功能: -先写一个类,继承Form from django.shortcuts import  ...
    
		
    10. 
						
  10. 前台Ajax发送数据给后台
		
    前台发ajax请求给后台 前台代码 let data= [{receiveAdd:receiveAddVal, sendAdd:sendAddVal,distance:distance,goodsNa ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. XXL-MQ v1.4.0 | 轻量级分布式消息队列
			
    Release Notes 1.[重构]XXL-MQ 核心代码重构,基于"存算分离"与"分区机制"设计思想.在轻量级.分布式的基础上,强化高吞吐.海量消息及水平 ...
    
			
    2. 
						
  2. 分钟级搭建你的专属大数据平台 ——TDH 社区开发版免费来袭
			
    ​ 星环科技TDH社区开发版集"开箱即用.分钟级部署.便捷开发"于一体,真正实现零门槛大数据开发体验!无需繁琐配置,只需一台机器,即可拥有企业级大数据平台的核心能力.目前,众多开发 ...
    
			
    3. 
						
  3. 用curl测网速统计访问耗时
			
      在<从基础到高级,带你结合案例深入学习curl命令>中,介绍了curl的使用方法,这里介绍一个用于统计响应耗时的最佳实践,助力老铁们合理设置网络超时时间.   下面介绍一个用于统计访问 ...
    
			
    4. 
						
  4. TemplatesImpl结合cc6在Shiro中的利用
			
    TemplatesImpl结合cc6在Shiro中的利用 这个文章也是参考p牛的文章;但其中许多细节,就比如为什么普通的Transformer[]数组链不能再shiro中使用; 但其中大致原理还是说一 ...
    
			
    5. 
						
  5. shell脚本中循环的变量无法全局生效
			
    说明 我们在编写shell脚本时,发现shell脚本中定义的while循环中定义的变量无法作用于全局,这是因为我们使用while循环时,创建了subshell,当subshell退出后,变量值就回收了 ...
    
			
    6. 
						
  6. 使用hive数据查询小结
			
    业务背景: 公司大数据查询需要通过hive查询和分析一些数据 产品提出业务分析需求: 我的处理方式: 接到需求就想怎么写SQL语句,然后不断调整SQL语句进行验证,最后这个需求写了170行的SQL语句 ...
    
			
    7. 
						
  7. 前/后向自动微分的简单推导与rust简单实现
			
    自动微分不同于数值微分与符号微分, 能够在保证速度的情况下实现高精度的求某个可微函数的定点微分值. 下面将简要介绍其原理, 并给出 rust 的两种微分方式的基本实现. 微分方法简介 数值微分 利用微 ...
    
			
    8. 
						
  8. 分布式可视化 DAG 任务调度系统 Taier 的整体流程分析
			
    Taier 作为袋鼠云的开源项目之一,是一个分布式可视化的 DAG 任务调度系统.旨在降低 ETL 开发成本,提高大数据平台稳定性,让大数据开发人员可以在 Taier 直接进行业务逻辑的开发,而不用关 ...
    
			
    9. 
						
  9. Centos设置Redis自启动（Systemd）
			
    前言 在生产环境中,我们在设置Redis服务自启动时有多种方式,这里采用Systemd管理方式进行设置Redis, Systemd管理起centos7版本中使用了systemd,systemd同时兼容 ...
    
			
    10. 
						
  10. ctypes学习 + GearDVFS源码分析（/src/perf_lib）
			
      最近在尝试复现GearDVFS的代码,代码结构很复杂,由于需要获取硬件信息,作者使用ctypes实现与底层的交互,任务紧迫,开始学习吧! 1. ctypes介绍   资料的来源已经放在了后文的链接 ...
    
			
    11.