Understanding How to Make jQuery Get Data From DOM and Servers

In this tutorial, we will introduce you to various jQuery get and set methods. While they are equally simple to use, they serve different functionalities in your code.

jQuery Get and Set: Main Tips

• jQuery has a selection of methods that you may use to set or get content, attributes, or server data.
• The setting methods also have a callback function.
• Make sure you use the correct syntax.
• Some methods can both set and get content.

Methods to Use jQuery Get and Set

By using jQuery, you can get or set either content or attributes from the DOM.

For the content, you may use three methods:

• .text() - make jQuery get or set text content.
• .html() - make jQuery get or set content, including the HMTL markup.
• .val() - make jQuery get or set values inside form fields.

syntax of jQuery Get and Set

As you can see, all of them can be used as jQuery get or set methods. However, the syntax differs.

The basic syntax for using the methods to get content follows this pattern:

$(selector).text | html | val()

The example below will get jQuery contents using all three of the methods:

$("button").click(() => {
  alert("Text: " + $("p").text());
  $("p").text("Some text");
});

To use these same methods to set values, use this pattern:

$(selector).text | html | val(string)

string here is the value that is meant to be placed in the selected element:

$("#setText").click(() => {
    $("#example1").text("How you doin'?");
});
$("#setHTML").click(() => {
    $("#example2").html("<em>How you doin'?</em>");
});
$("#setValue").click(() => {
    $("#example3").val("This is gold, I tell you");
});

To get attribute jQuery, we use the .attr() method:

$(selector).attr()

It can select a method that is already present in an element and return the value:

$("linkButton").click(() => {
    alert($("#link").attr("href"));
});

You can also use it to set attributes, using syntax like this:

$(selector).attr(string)

Now, look at how it could be implemented in the actual code:

$("#button").click(() => {
    $("#link").attr({
       "href": "https://www.bitdegree.org/",
       "title": "https://www.bitdegree.org/"
    });
});

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Callback Function of jQuery Get and Set

All of the jQuery methods for setting content also have a callback function. The syntax for it is as follows:

$(selector).text | html | val | attr(function(index, originalValue){})

Here we have an example showing it in use with the .text() function:

$("#setHTML").click(() => {
    $("#example").text((i, originalText) => {
        return `Original text: ${originalText} updated text: Damn good coffee! (index: ${i})`; 
    });
});

Now, here we have an example which illustrates how using it with .attr() method can look in code:

$("linkButton").click(() => {
    $("#link").attr("href", (i, originalValue) => {
        return `${originalValue}/learn`; 
    });
});

As you can see, this function includes two parameters:

• The index of the current element in the list of elements selected.
• The original value.

Getting Server Data

The methods we covered up to this point were meant for getting and setting the content from the DOM. Now, whenever you need to get data from the server, you should be using the $.get() jQuery method:

// returns the entries.php document
$.get( "entries.php" );

// returns the entries.php document while passing two arguments with the request
$.get( "entries.php", { id: "2", name: "Bob" } );

// returns the entries.php document while passing an array argument with two items inside with the request
$.get( "entries.php", { "choices[]": ["Bob", "Beth"] } );

The syntax for it is as follows:

$.get(url,data,callback,type)

Only the first parameter of the $.get() jQuery method is required. Url defines the web page you want to send a request to. The other three parameters are optional:

• data defines information that get sent with the jQuery get request.
• callback defines the function to be executed if the jQuery get request is successful.
• type defines what type of data is expected as the server's response.

As $.get() is considered to be an AJAX method, you can read more about it in the jQuery AJAX tutorial.

jQuery Get and Set: Summary

• By using jQuery get and set methods, you may manipulate element content, attributes, or server data.
• A callback function might be used on all setting methods.
• Some methods can both set and get content depending on the syntax you use.