JQuery实现Ajax

最新推荐文章于 2024-07-29 20:46:57 发布

成_蹉_跎

最新推荐文章于 2024-07-29 20:46:57 发布

阅读量183

点赞数

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/cheng_cuo_tuo/article/details/93313159

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JQuery是对Ajax操作进行了封装

在 jQuery中最底层方法时，$.ajax()，第二层是 load()，$.get()和 $.post() 
第三层是 $.getScript() 和 $.getJSON()

load() 方法
任何的HTML元素都可以调用。是jQuery中最常用和最简单的 Ajax 方法，能载入远程的HTML代码并插入到 DOM　中.

load(url [ , data ] [ , callback ] )
    url : String，请求 url 页面的 url 地址。
    data（可选）：object，发送到服务器的 key/value 数据
    callback（可选）：Function，请求完成时的回调函数，无论请求成功或失败

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

需要jQuery 库

<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $( function ( {
      $("a").click ( funtion() {
           var url = this.href;    
            // 防止缓存，在请求后面添加一个时间点，使的每个请求内容都是不一样的
           var args = {"time" : new Date()};
            $("#content").load(url, args);
        } ) ;  
    } ) ;
</script>
<body>
    <a href="helloAjax.txt">HelloAjax</a>
    <div id="content"></div>
</body>

load() 方法细节
如果只需要加载目标 HTML 页面的某些元素，则可以通过 load() 方法的 url 参数来达到目的，通过 url 参数指定选择符，就可以方便的从加载过来的 HTML 文档中选出需要的内容， load() 方法的 url 参数的语法结构为 “url selector” （注意：url 和选择器之间由一个空格）
传递方式：load() 方法的传递参数根据参数 data 来自动定义的。如果没有参数传递，采用 GET 方式传递，否则使用 POST 方式。
对于必须在加载完成才能继续操作，load() 方法提供了回调函数，该函数有三个参数，代表请求返回内容的data;代表请求状态的 textStatus 对象和 XMLHttpReqeust 对象。

<script type="text/javascript">
    $(function() {
        $('a').click(function() {
            var url = this.href + ' h2'; //可以选择加载其中的一个标签，注意 url selecter 之间有一个空格
            //任何一个 html 节点都可以使用 load 方法加载 Ajax，结果将直接插入 html 节点中
            $('#detail').load(url);
            return false;
        })
    })
</script>

$.get() 或 $.post() 方法
xml格式文件

<script type="text/javascript">
$(function() {
    $('a').click(function() {
        var url = this.href;
        var args = {'time' : new Date()};

        //args:JSON格式
        //post 方法得到的结果再回调函数的参数中，直接将 post 改成 get 就是 get 请求了
        //function：回调函数，当响应结束时，回调函数被触发，响应结果在data中
        $.post(url, args, function(data){
            //alert(data); //Object XMLDocument
            //将 xml 格式的包装成 jQuery 的方法
            var name = $(data).find('name').text();
            var email = $(data).find('email').text();
            var website = $(data).find('website').text();
            $('#detail').empty()
                .append('<h2><a href="mailto:' + email + '">' + name + '</h2>')
                .append('<a href="' + website + '">' + website + '</a>');
            });
        return false;
    })
})
</script>
</head>
<h1>People</h1>
    <ul>
        <li>
        <a href="files/andy.xml">Andy</a>
        </li>
        <li>
            <a href="files/richard.xml">Richard</a>
        </li>
        <li>
            <a href="files/jeremy.xml">Jeremy</a>
        </li>
        <div id="detail"></div>
    </ul>
</body>

JSON格式文件

<script type="text/javascript">
$(function() {
    $('a').click(function() {
        var url = this.href;
        var args = {'time' : new Date()};

        //args:JSON格式
        //get 方法得到的结果再回调函数的参数中
        //function：回调函数，当响应结束时，回调函数被触发，响应结果在data中
       // 从服务端返回的 JSON 字符串，属性名必须是双引号
        //alert(url);
        $.getJSON(url, args, function(data){
            var name = data.person.name;
            var email = data.person.email;
            var website = data.person.website;
            $('#detail')
                .empty()
                .append('<h2><a href="mailto:' + email + '">' + name + '</h2>')
                .append('<a href="' + website + '">' + website + '</a>');
            });
        return false;
    })
})
</script>
</head>
<h1>People</h1>
    <ul>
        <li>
            <a href="files/andy.js">Andy</a>
        </li>
        <li>
            <a href="files/richard.js">Richard</a>
        </li>
        <li>
            <a href="files/jeremy.js">Jeremy</a>
        </li>
        <div id="detail"></div>
    </ul>
</body>