使用jquery来完成AJAX操作

时间：2024-12-20 22:33:40

jQuery对Ajax操作进行了封装，在jQuery中最底层的方法是$.ajax()，第二个是load()，$.get()和$.post()，第三层是$.getscript()和$.getJSON()。

　　load()方法

　　-load()方法是jquery中最为简单和常用的ajax方法，能载入远程的HTML并插入到DOM中，它的结构是：load(url [，data][，callback])；

　　url　　　　　string　　　　　　请求HTML页面的URL地址

　　data可选　　object　　　　　　发送到服务器的key/value数据

　　callback　　function　　　　　　请求完成时的回调函数，无论请求成功或失败

　　-程序员只需要使用jquery选择器为HTML片段指定目标位置，然后将要加载的文件的URL作为参数传递更给load()方法即可

　　细节

　　-如果需要加载目标HTML页面内的某些元素，则可以通过load()方法的url参数来达到目的，通过url参数指定选择符，就可以方便的从加载过来的HTML文档中选出所需要的内容，load()方法的url参数的语法结构为“url selector”(注意：url和选择器之间有一个空格)

　　-传递方式：load()方法的传递参数根据data来自动自定，如果没有参数，采用GET方式传递，否则采用POST方式

　　-对于必须在加载完才能继续的操作，load()方法提供了回调函数，该函数由三个参数：代表请求返回内容的data；代表请求状态的textStatus对象和XMLHttpRequest对象

　　-laod()方法  只能用于 txt和html 数据传输

　　

<body>

    <script src="jquery-1.12.4.min.js"></script>

    <script>

        $(function(){

         //使用jquery来操作Ajax

         $("a:first").on("click",function(){

             var url=this.href;   //直接填写url就行  默认方式是get

             $("#show").load(url);

             return false;

         });

        });

    </script>

<ul>

    <li><a href="content1.txt">content</a></li>

    <li><a href=""></a>container</li>

    <li><a href=""></a>conmand</li>

</ul>

    <div id="show"></div>

</body>

　　

    <script src="jquery-1.12.4.min.js"></script>

    <script>

        $(function(){

         //使用jquery来操作Ajax

         $("a:first").on("click",function(){

             //<h2><a href="">www.zhongguo.com</a></h2>

             //如果只想要a标签  可以这么写

             var url=this.href+" a";  

             $("#show").load(url);

             return false;

         });

        });

    </script>

　　

    <script src="jquery-1.12.4.min.js"></script>

    <script>

        $(function(){

         //使用jquery来操作Ajax

         $("a:first").on("click",function(){

             var data={"time":new Date()};  //post请求JSON格式，清理缓存

             //<h2><a href="">www.zhongguo.com</a></h2>

             //如果只想要a标签  可以这么写

             var url=this.href+" a";  

             $("#show").load(url,data);

             return false;

         });

        });

    </script>

　　$.get() $.post方法

　　$.get()方法使用GET方式来进行异步请求，它的结构是：$.get(url,[,data][,callback][,type]);

　　参数名称　　　　　　　　　　类型　　　　　　　　　　说明

　　url　　　　　　　　　　　　string　　　　　　　　　　请求HTML页面的url地址

　　data(可选)　　　　　　　　　object　　　　　　　　　　发送到服务器的key/value数据作为QueryString

　　　　　　　　　　　　　　　　　　　　　　　　　　　　附加到请求url中

　callback(可选)　　　　　　　　　　function　　　　　　　　载入成功时，回调函数（只有当response返回

　　　　　　　　　　　　　　　　　　　　　　　　　　　　状态时，success才调用该方法）

　　type （可选）　　　　　　　　string　　　　　　　　　服务器返回内容的格式，包括 xml、html json

　　　　　　　　　　　　　　　　　　　　　　　　　　　　script text

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

     <script src="jquery-1.12.4.min.js"></script>

    <script>

        $(function(){

            $("a:first").on("click",function(){

                var url=this.href;

                //解析xml数据格式使用$.get()，其中返回的对象在回调函数function中 a

                $.get(url,function(a){

                    //获取a子元素from的文本

                    var name=$(a).find("from").text();

                    //添加到DIV中

                    $("#show").append(name);

                });

                return false;

            });

        });

    </script>

<ul>

    <li><a href="content3.xml">content</a></li>

    <li><a href=""></a>container</li>

    <li><a href=""></a>conmand</li>

</ul>

    <div id="show"></div>

</body>

</html>

　　$.post()方法和$.get()方式参数都是一样的  只是请求不一样  一个是GET  一个是POST

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

     <script src="jquery-1.12.4.min.js"></script>

    <script>

        $(function(){

            $("a:first").on("click",function(){

                var url=this.href;

                //解析xml数据格式使用$.get()，其中返回的对象在回调函数function中 a

                $.post(url,function(a){

                    //获取a子元素from的文本

                    var name=$(a).find("from").text();

                    //先清空div中的元素  之后在添加元素，防止多次点击的时候重复添加

                    $("#show").empty().append(name);

                });

                return false;

            });

        });

    </script>

<ul>

    <li><a href="content3.xml">content</a></li>

    <li><a href=""></a>container</li>

    <li><a href=""></a>conmand</li>

</ul>

    <div id="show"></div>

</body>

</html>

　　$.getJSON()方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

     <script src="jquery-1.12.4.min.js"></script>

    <script>

        $(function(){

            $("a:first").on("click",function(){

                var url=this.href;

                $.getJSON(url,function(a){

                    //getJSON 返回的是json格式的数据，原生的js，不需要解析，而且也不需要返回jquery对象

                    //返回的xml对象，jquery要是想使用，必须转换jquery对象

                    //获取a子元素from的文本

                    var name=a.email;

                    //先清空div中的元素  之后在添加元素，防止多次点击的时候重复添加

                    $("#show").empty().append(name);

                });

                return false;

            });

        });

    </script>

<ul>

    <li><a href="content.js">content</a></li>

    <li><a href=""></a>container</li>

    <li><a href=""></a>conmand</li>

</ul>

    <div id="show"></div>

</body>

</html>

　　

相关文章