Skip to content
the poor coder

jquery load url in same window

Poor Man
Published
Reading time
1 min read
On this page

jQuery Load URL in Same Window#

If you want to load a URL in the same window using jQuery, you can use the .load() method. This method loads data from a server and puts the returned HTML into the selected element.

Method 1: Using .load() Method#

Text

$(document).ready(function(){
  $("#target").click(function(){
    $("#content").load("https://www.example.com/");
  });
});
  • $(document).ready(function(){...}); ensures that the code inside it will only execute once the page Document Object Model (DOM) is ready for JavaScript code to execute.
  • #target is the ID of the element that will trigger the load event.
  • #content is the ID of the element where the loaded content will be displayed.
  • .load("https://www.example.com/"); loads the content from the specified URL and places it inside the #content element.

Method 2: Using .get() Method#

You can also use the .get() method to load data from a server using an HTTP GET request.

Text

$(document).ready(function(){
  $("#target").click(function(){
    $.get("https://www.example.com/", function(data){
      $("#content").html(data);
    });
  });
});
  • $.get("https://www.example.com/", function(data){...}); sends an HTTP GET request to the specified URL and retrieves the response as HTML.
  • function(data){...} is a callback function that is executed once the request is completed successfully.
  • $("#content").html(data); sets the HTML content of the #content element to the retrieved data.

Keep going

2023

how to sort an array

How to Sort an Array If you have an array and you want to order its elements in a specific way, you need to use a sorting algorithm. There are several sorting algorithms available, but two of the most commonly used are…

javascript2 min read
2023

jquery mobile or desktop

jQuery Mobile or Desktop? As a web developer, I have had some experience with both jQuery Mobile and jQuery Desktop. Both frameworks have their pros and cons, and which one to use really depends on the specific project…

javascript1 min read
2023

node.js folder structure

Node.js Folder Structure If you are new to Node.js, it can be daunting to create a folder structure that will work for your project. The structure you choose will depend on the size and complexity of your project. Here…

javascript1 min read
ESC