How to stop page refresh when button inside form clicked?

Scenario

I have a button in a web page which will call a JavaScript method when clicked, but there is a side effect which is the whole page get refreshed after the button is clicked.

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

How to stop the page refresh when the button is clicked?

To fix this issue, you should let the Javascript function getData() return false.

<script type="text/javascript>
 function getData(){
    //do something
    return false;
  }
</script>
<form method="POST">
    <button name="data" onclick="javascript:return getData()">Click</button>
</form>