使用jQuery实现Ajax

使用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)
上一篇:Technical support website


下一篇:jenkins部署与CI/CD pipeline