首页 > 其他分享> 文章详细

使用jQuery实现Ajax

2019-05-24 15:50:04 阅读：180 来源： 互联网

标签：jQuery function name 实现 website url Ajax var data

使用jQuery实现Ajax

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()方法即可）

注意：

1.如果data有数据是post请求，没有是get请求

2.可以在url后拼加selector选择器，选取部分内容插入页面中

 $('a').click(function () {
                   var url = this.href + ' h2';
                   var data = {"time": new Date()};
                   $('#details').onload(url,data);
                    return false;
                });

get方法

post方法

获取xml文件格式

 $('a').click(function () {
                var url = this.href;
                var args = {"time":new Date()};
                /**
                 * url
                 * args:JSON格式
                 * function：回调函数被触发，响应结果在data中
                 */
                $.post/get(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='"+email+"'>"+ name+"</a></h2>")
                        .append("<a href='" + website +"'>" + website + "</a>")
                })
                return false;
            })

获取JSON文件格式

     $('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='"+email+"'>"+ name+"</a></h2>")
                        .append("<a href='" + website +"'>" + website + "</a>")
                })
　　　　
　　　　　　　　　　
                return false;
            })

        $.get(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='"+email+"'>"+ name+"</a></h2>")
                        .append("<a href='" + website +"'>" + website + "</a>")
                },JSON)

标签：jQuery,function,name,实现,website,url,Ajax,var,data
来源： https://www.cnblogs.com/yangHS/p/10918480.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用jQuery实现Ajax