jquery Refresh div

The following code demonstrates reloading div content using jQuery Ajax code by server response.

Let's understand with the following example form containing email text input and a submit button.

<div id="result"> </div>
<form method="post" id="demo" >
    <input type="text" name="email" id="email" class="form-control" placeholder="Enter your Email">
    <input type="submit" value="Submit" name="submitBtn" id="submitBtn" >
</form>
 

Here

<div id="result"> </div>

Now we don't want to reload the page after form submission. Therefore we can submit a form using Ajax to prevent page reload.

Please review the following code block to meet the objective: jQuery refresh div without reloading page.

<script  src="jquery-3.2.1.min.js"></script>

<script>
    $(document).ready(function () {
        $("form").submit(function (event) {
            $.ajax({
                url: './server.php', // sending ajax request to this server page
                type: 'post',
                dataType: "json",
                data: {
                   'email': $("#email").val()
                },
                success: function (response) {
                    $("#result").html(response.message);
                }
             });
         event.preventDefault();
        });
    });

</script>

Code Explanation:

• Included jQuery library
• The document-ready event is used here to ensure DOM is ready.
• jQuery method submit is executed once the submit event is triggered.
• jQuery Ajax method is used to perform asynchronous (non-blocking) HTTP requests to the server.
• Url param is used to specify the request URL to the server. In our example it server.php
• Type: request type whether Get/Post. We used a post request to the server.
• dataType: Expected data type from the server. In our example, specified JSON means we are expecting a response in JSON format.
• Data: represents data to be sent to the server. Data is appended in the URL in the GET request. In our example, we are sending email input to the server.
• Success: method is invoked once we receive a successful response from the server.
• Within the function block, we can handle further client-side manipulations. We are rendering server responses within the div with the id result.
• event.preventDefault: as the name tells us, it prevents browsers from performing default behavior once the event is triggered.

Code on Server.php file

<?php

if (empty($_POST['email'])) {
    $data['success'] = false;
    $data['message'] = 'Email is required.';
} else {
    $data['success'] = true;
    $data['message'] = 'Received Email';
}

echo json_encode($data);
?>

Server.php Code detail:

Page on server requested by Ajax received data sent through Ajax and processed as per business logic. In our case above it received posted email values and checked for empty.

Return $data array in JSON format using json_encode as requested dataType from the client.

Therefore the following code

$("#result").html(response.message);

Will replace the content of div with message return from the server based on email value.

The above example is explained here just to give an overview of how we can reload div content using Ajax.

$.post( "path_of_server_file", function( data ) {
  $( "#result" ).html( data );
});
 

For more detail about ajax you may visit here.