jQuery中Ajax

来源：互联网发布：网络互动直播新闻编辑：程序博客网时间：2024/06/03 14:45

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

1、
load()
在html中加载Ajax

    <script src="../script/jquery-3.2.1.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(function(){            $("a").click(function(){            var url = this.href + " h2 a";//取链接中的h2中的a部分,注意选择器之间空格            var args = {"time":new Date()};            //任何一个html 节点都可 使用load方法来加载Ajax,结果将直接插入html节点            $("#details").load(url,args);            return false;            });        });    </script>  </head>   <body>     <h1>People</h1>    <ul>        <li><a href="andy.html">Andy</a></li>        <li><a href="richard.html">Richard</a></li>        <li><a href="jemery.html">Jemery</a></li>    </ul>    <div id="details">    </div></html>

2、
.get()和.post() 对xml文件下数据的加载

<script src="../script/jquery-3.2.1.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(function(){            $("a").click(function(){            var url = this.href;            var args = {"time":new Date()};            //url;            //args: JSON格式            //function:回调函数：当相应结束时，回调函数被触发。响应结果在data中            $.post(url, args, function(data){                var name = $(data).find("name").text();                var email = $(data).find("email").text();                var website = $(data).find(website).text();                $("#details").empty()                            .append("<h2><a href='maito:"+ email +"'>"+ name +"</a></h2>")                            .append("<a href='" + website + "'>" + website +"</a>");            });            return false;            });        });    </script>  </head>   <body>     <h1>People</h1>    <ul>        <li><a href="andy.xml">Andy</a></li>        <li><a href="richard.html">Richard</a></li>        <li><a href="jemery.html">Jemery</a></li>    </ul>    <div id="details">    </div></html>

3、
getJSON(), 返回的data是JSON对象

<script src="../script/jquery-3.2.1.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(function(){            $("a").click(function(){            var url = this.href;            var args = {"time":new Date()};            //url;            //args: JSON格式            //function:回调函数：当相应结束时，回调函数被触发。响应结果在data中            $.getJSON(url, args, function(data){                var name = data.person.name;                var email = data.person.email;                var website = data.person.website;                $("#details").empty()                            .append("<h2><a href='maito:"+ email +"'>"+ name +"</a></h2>")                            .append("<a href='" + website + "'>" + website +"</a>");            });            return false;            });        });    </script>  </head>   <body>     <h1>People</h1>    <ul>        <li><a href="andy.xml">Andy</a></li>        <li><a href="richard.html">Richard</a></li>        <li><a href="jemery.html">Jemery</a></li>    </ul>    <div id="details">    </div></html>

这里写图片描述

0 0