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. 简单说说C#中委托的使用-01
			
    简单说说C#中委托的使用-01 前言 距离上次更新文章,已经过去...月了. 没更新文章的主要原因,主要是因为参加工作后,感觉思维没有上学那会活跃,写文章没有思绪.再就是上班的时候把精力用光了,下班后 ...
    
			
    2. 
						
  2. 【语义分割专栏】：U-net实战篇(附上完整可运行的代码pytorch)
			
    目录 前言 U-net全流程代码 模型搭建(model) 数据处理(dataloader) 评价指标(metric) 训练流程(train) 模型测试(test) 效果图 结语 前言 U-net原理篇 ...
    
			
    3. 
						
  3. Dispatch PDI v2.0.4即将发布，历经1000+用户装机验证，稳定版震撼来袭！
			
    Dispatch PDI V2.0.4版本,即将登场! 亲爱的用户们: 在数据调度领域的探索之路上,我们始终致力于为大家提供更强大.更高效的工具.今天,我们怀着激动的心情宣布,Dispatch PDI ...
    
			
    4. 
						
  4. 处理日期和时间的chrono库
			
    C++11中提供了日期和时间相关的库chrono,通过chrono库可以很方便地处理日期和时间,为程序的开发提供了便利.chrono库主要包含三种类型的类:时间间隔duration.时钟clocks. ...
    
			
    5. 
						
  5. HarmonyOS NEXT仓颉开发语言实战案例：外卖App
			
    各位周末好,今天为大家来仓颉语言外卖App的实战分享. 我们可以先分析一下页面的布局结构,它是由导航栏和List容器组成的.幽蓝君目前依然没有找到仓颉语言导航栏的系统组件,还是要自定义,这个导航栏有三 ...
    
			
    6. 
						
  6. 大麦基于HarmonyOS星盾安全架构，打造全链路安全抢票方案
			
    6月21日,在华为开发者大会2025 "安全与隐私分论坛"上,大麦作为鸿蒙生态应用开发优秀案例,受邀进行议题演讲,分享其基于鸿蒙系统星盾安全架构构建的票务安全创新实践.大麦娱乐无线 ...
    
			
    7. 
						
  7. 让 Python 代码飙升330倍：从入门到精通的四种性能优化实践
			
    花下猫语:性能优化是每个程序员的必修课,但你是否想过,除了更换算法,还有哪些"大招"?这篇文章堪称典范,它将一个普通的函数,通过四套组合拳,硬生生把性能提升了 330 倍!作者不仅 ...
    
			
    8. 
						
  8. Windows 10文件夹中的一些高级搜索技巧
			
    搜索文件中的内容 默认的win10搜索是只针对文件名搜索的,但有的时候我们需要搜索文件中包含特定内容的文件,这时候需要设置一下搜索的选项打开搜索文件名和内容选项: 打开文件夹–查看 选择选项 打开文件 ...
    
			
    9. 
						
  9. Codeforces Round #673 (Div. 2)  ABC 题解
			
    A. Copy-paste 题意:问在保持每个数都小于等于k的情况下,最多能执行多少步a[j] += a[i] ,其中(i,j)为任意不同下标. 思路:水题,排个序,用a[1]去加到别的值上,看每个数 ...
    
			
    10. 
						
  10. shell 编程获取文件名后缀为特定字符的函数
			
    简介 linux && windows 我们常常要获取某个特定文件后缀的文件. 使用shell进行获取. 参考链接 https://blog.csdn.net/waitfor920/a ...
    
			
    11.