码迷,mamicode.com
首页 > Web开发 > 详细

用JQuery实现ajax技术的常用方法

时间:2017-08-31 19:18:07      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:fun   date()   ack   相对   ext   开发   点击   jquery   json   

       在我的前一篇用js实现ajax的三种技术中,我提到了怎么用原生的js代码去实现ajax技术,但是 可以看到,代码相对于来说还是比较多,在我们实际的开发中,我们用到的比较多的技术是用jquery来实现,因为相对于js来说, 用jquery来实现ajax技术会简单很多,因为它将一些通用的代码都封装在一些方法里面,我们可以直接调用方法即可使用, 非常方便,所有下面我就总结了关于jquery实现ajax的一些常用方法。

一、load(url, args)


概述:load()方法是最为简单和常用的方法,它的方法是载入远程 HTML 文件代码并插入至 DOM 中。
参数:url:目标URL
args:需要传给目标url的参数

举例:点击a链接,在对应位置#msg加上a链接目标页面返回来的Html代码

$(function(){
    $("a").click(function(){
        var url=this.href;
        var args={"time":new Date()};
        $(‘$msg‘).load(url,args);
        return false;
    });
})


    

callback:回调函数,当响应结束时,回调函数被触发,响应结果会返回给data参数,响应结果可以是xml;html;json的任意一种

二、$.get(url, args, [callback])


参数: url:待载入页面的URL地址
args:需要传给目标url的参数
callback:载入成功时回调函数。
举例:点击a链接,在对应位置#msg加上a链接目标页面返回来的xml代码

$(function(){
    $("a").click(function(){
        var url=this.href;
        var args={"time":new Date()};
        //data是返回的响应数据
        $.get(url,args,function(data){
            //获取xml文件值的方法
            var msg=$(data).find("name").text();
            $("#msg").empty.append("需要添加的html代码");
        });

        return false;
    });
})

三、$.getJSON(url, args, [callback])


参数: url:待载入页面的URL地址
args:需要传给目标url的参数
callback:载入成功时回调函数。
说明:与get()方法稍有不同,在获取响应结果时需要告知此返回结果是一个JSON文件

举例:点击a链接,在对应位置#msg加上a链接目标页面返回来的json文件

$(function(){
    $("a").click(function(){
        var url=this.href;
        var args={"time":new Date()};
        //data是返回的响应数据
        $.get(url,args,function(data){
            //获取json文件值的方法,因为已经告知是json文件,所以可以直接用data获取
            var msg=data.name;
            $("#msg").empty.append("需要添加的html代码");
        });

        return false;
    });
})

用JQuery实现ajax技术的常用方法

标签:fun   date()   ack   相对   ext   开发   点击   jquery   json   

原文地址:http://www.cnblogs.com/joyce-cui/p/7459827.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!