• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JQuery ajaxGet Example

July 29, 2014 //  by Krishna Srinivasan//  Leave a Comment

DOM stands for Document Object Model which gives standards for accessing HTML elements and the attributes. These can be manipulated using Jquery ajaxGet() method. Using HTTP GET request data can be loaded from the server. When we access the server without reloading the web page, then we could pass the information for request to the server by using GET option. The purpose of the GET is to get the information. Browsers will cache the result from the GET request and if same request is made again then they will display the caches result rather than rerunning the entire request.

  • Introduction to JQuery
  • Finding Duplicate Input Elements Using jQuery

JQuery ajaxGet Syntax

$.get(url, [data], [success], [dataType] )

Where,

  • url: Address to which request is sent.
  • Data: It is the key/value pair which is sent to the requested url. It is optional parameter.
  • Success: It is the optional callback function, executed when the data is loaded successfully.
  • DataType: It is the dataType of the data expected by the callback function. Default datatype expected are: “html”, “xml”, “json” and “script”.

Note: In the above syntax of ajaxGet square bracket represents the optional parameters to be used.

JQuery ajaxGet Example

Below example demonstrates the three Jquery Get methods such as text(), html() and val() to manipulate DOM and a jquery method to get attribute value.

<!DOCTYPE html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#button1").click(function(){
    alert("Text: " + $("#d1").text());
  });
  $("#button2").click(function(){
    alert("HTML: " + $("#d1").html());
  });
  $("#button3").click(function(){
      alert("value: " + $("#d2").val());
  });
  $("#button4").click(function(){
         alert($("#d3").attr("href"));
  });
});
</script>
</head>
<body>
<p id="d1">Note: observe the representation of word <em>emphasized</em> in text and html method.</p>

<p>Name:<input type="text" id="d2" value="Incredible India"></p>
<p><a href="http://dummy.com" id="d3">dummy.com</a></p>
<button id="button1">Returns Text</button>
<button id="button2">Returns HTML</button>
<button id="button3">Returns Value</button>
<button id="button4">Returns href Value</button>
</body>
</html>
 
  • In the above example, we have shown how the word emphasized is manipulated in the text() method and in the HTML method.
  • alert(“Text: ” + $(“#d1″).text()): Here #d1 is used as selector for tag p content. When user clicks the button <button id=”button1”>Returns Text</button>, text() method is invoked which returns the plain text data.
  • alert(“HTML: ” + $(“#d1″).html(): Here same #d1 is used as selector for tag p content .When user clicks the button <button id=”button2”>Returns HTML</button>, html() method is invoked which returns the data in html format.
  • alert(“value: ” + $(“#d2”).val()):It returns the value of the input field on the server.
  • alert($(“#d3”).attr(“href”)):It returns the attribute value for the selector id d3.

JQuery ajaxGet Demo

When you run the above example, you would get the following output : Jquery-ajaxGet-Example Jquery-ajaxGet-Example (1) Jquery-ajaxGet-Example (2) Jquery-ajaxGet-Example (3) Jquery-ajaxGet-Example (4)

Category: jQueryTag: JQuery AJAX

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Bootstrap Collapse Plugin
Next Post: JQuery getJSON Example jquery»

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact