Using jQuery to implement Ajax

Keywords: Ruby JQuery JSON Fragment xml

Using jQuery to implement Ajax

JQuery encapsulates Ajax operations. In jQuery, the lowest level method is $. ajax(), the second level is load(),$.get(),$.post(), and the third level is $. getScript() and $. getJSON()

 

load() method:

-- the load() method is the most simple and commonly used Ajax method in jQuery. It can load remote HTML code and insert it into the DOM. Its structure is: load(url[,data][,callback])

Parameters:

url:String the URL address of the request HTML page

Data (optional): the key/value data of the object sending server

Callback (optional): the callback function when a function request is completed, regardless of whether the request succeeds or fails

(the programmer only needs to use the jQuery selector to specify the target location for the HTML fragment, and then pass the url of the file to be loaded to the load() method as a parameter.)

Be careful:

1. If the data is a post request, it is not a get request

2. You can spell the selector after the url to select part of the content to insert into the page

 

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

 

 

 

get method

post method

Get xml file format

 $('a').click(function () {
                var url = this.href;
                var args = {"time":new Date()};
                /**
                 * url
                 * args:JSON format
                 * function: The callback function is triggered, and the response result is in 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;
            })

  

Get JSON file format

 

     $('a').click(function () {
                var url = this.href;
                var args = {"time":new Date()};
                /**
                 * url
                 * args:JSON format
                 * function: The callback function is triggered, and the response result is in 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)

Posted by s2j1j1b0 on Tue, 05 Nov 2019 11:40:43 -0800