如何在onclick上刷新特定div而不会丢失动态数据

I want to fetch data when onclick is invoked. I have four div in my form and I want only a particular div to be reloaded and fetch data. while loading it should not discard the form data. Anyone help. Thanks in advance for people who are going to help me in this.

my code looks something like this

<div id="fetch">
<?php
//query to fetch data
?>
</div>
<div id="data4">
//dynamic data
//Want to retain this data even after fetch
</div>

In this case you should use AJAX. Onclick you can send a xmlhttprequest (JS) to a separate php file, which returns the data you need (for example as string / JSON), and insert it into your website with JS.

Example:

function test()
  {
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
      if(xhr.readyState==4 && xhr.status==200)
      {
        result = xhr.responseText;
        document.getElementById("test_field").innerHTML = result;
      }
    }
    xhr.open("GET","your_ajax_file.php",true);
    xhr.send();
  }

your_ajax_file.php returns the data you want to insert.

You mentioned you have a problem with function call, but you did not give more information. so i will give you an example how to write an ajax request, then you can maybe give me more detailed info on where your problem is.

$.ajax({
    url: 'ajax_file.php',
    type: 'post',
    data: {var1: 'value1', var2: 'value2'},
    success: function( data ){
        console.log('ajax request successful! data: '+data);
    },
    error: function( jqXhr, textStatus, errorThrown ){
        console.log( errorThrown );
    }
});

And in your ajax_file.php do something like this:

<?php
$var1 = $_POST['var1'];
$var2 = $_POST['var2'];

echo $var1.', '$var2;

edit: typo, changed val2 to var2 in ajax request