jQuery中Ajax

最新推荐文章于 2024-03-13 07:00:00 发布

一杯红酒配电影

最新推荐文章于 2024-03-13 07:00:00 发布

阅读量298

点赞数

分类专栏：前端 javaweb 文章标签： jquery ajax

本文链接：https://blog.csdn.net/whiteblack_dream/article/details/72085003

版权

javaweb 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

前端

19 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
jQuery中Ajax

jQuery对Ajax操作进行了fengzh，在jQuery中最底层的方法时.ajax(),第二层是load(),.ajax(), 第二层是load(), .get() 和 .post(),第三层是.post(), 第三层是.getScript() 和 $.getJSON()1、 load() 在html中加载Ajax &lt;script src=&quot;../script/jquery-3.2.1
复制链接

扫一扫

专栏目录