How to Update a Web Page Section Using jQuery/AJAX Without Reloading?

How to Update a Portion of a Page Without Reloading using jQuery/AJAX

Reloading a specific div on a button click without affecting the entire page is a common requirement in web development. This can be achieved using jQuery's AJAX functionality.

Example

Suppose you have a button that, when clicked, should update the content of a div called div1. Here's how you can do it:

HTML:

<code class="html"><input type="button" id="myButton" value="Update DIV" />

<div id="div1">
    <!-- Content to be updated -->
</div></code>

jQuery:

<code class="javascript">$("#myButton").click(function() {
    $("#div1").load(location.href + " #div1");
});</code>

Explanation:

• The jQuery click event handler is attached to the button with the id myButton.
• When the button is clicked, the load() function is called on the div with the id div1.
• The load() function loads the content of the specified URL into the div.
• In this case, the URL is location.href " #div1". This retrieves the current page's URL and appends the #div1 selector.
• The space before the second # sign is crucial. Without it, the above code will reload the entire page within the div.
• As a result, when the button is clicked, the content of div1 will be updated with the content of the same div from the current page.

Note: Remember to include the jQuery library before using the above code.

The above is the detailed content of How to Update a Web Page Section Using jQuery/AJAX Without Reloading?. For more information, please follow other related articles on the PHP Chinese website!