Home > Backend Development > PHP Tutorial > How to Dynamically Update DIV Content Using Ajax, PHP, and jQuery?

How to Dynamically Update DIV Content Using Ajax, PHP, and jQuery?

Patricia Arquette
Release: 2024-10-21 16:39:02
Original
1118 people have browsed it

How to Dynamically Update DIV Content Using Ajax, PHP, and jQuery?

Utilizing Ajax, PHP, and jQuery to Dynamically Update DIV Content

In this guide, we'll explore the process of dynamically changing the content of a DIV element using Ajax, PHP, and jQuery.

When a user clicks on a link, the script makes an Ajax call using the link's URL as a data parameter to your PHP file. The PHP file then processes the data and returns it as a string. Finally, the string is used to replace the content of the targeted DIV.

To implement this functionality, follow these steps:

<script>
function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'Your URL',
    data: "id=" + id, // appears as $_GET['id'] on the server-side
    success: function(data) {
      // data is your summary
      $('#summary').html(data);
    }
  });
}
</script>
Copy after login

Next, add an onclick event to your list items:

<a onclick="getSummary('1')">View Text</a>
<div id="summary">This text will be replaced when the onclick event is triggered.</div>
Copy after login

By following these steps, you can dynamically update the contents of a DIV with data retrieved from your PHP file using Ajax and jQuery's manipulation capabilities.

The above is the detailed content of How to Dynamically Update DIV Content Using Ajax, PHP, and jQuery?. For more information, please follow other related articles on the PHP Chinese website!

source:php
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template