没有刷新的Ajax表单提交“不起作用”

我正在尝试在同一页面中提交表单，而不刷新页面。

我的表格：

<?php
if(isset($_POST['transfer'])){

  $amount =  $_POST['amount'] ? $_POST['amount']  : '';
  $from_c = $_POST['from_c'] ? $_POST['from_c'] :'';
  $to_c  = $_POST['to_c'] ? $_POST['to_c'] : '';

}
?>

<form  class="form-inline" method="post" action="convert.php" onsubmit = 'return false;' id = "frmData">
  <div class="md-form form-group col-sm-3">
    <div class="input-group col-sm-12">
      <input type="number" value="1" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control" name="amount">

      <span class="input-group-addon" id="natCurrency" style="margin-top: 10%;margin-left: -5;margin-right: 15%;"></span>
    </div>
  </div>
  <div class="">
    <label for="from_c">from currency</label>
    <select  id="natSelect" onchange="let csymbol = $(this).find(':selected').data('symbol');$('#natCurrency').text(csymbol) " name="from_c" class="mdb-select colorful-select dropdown-primary" style="width:200px;" placeholder="select currency" >
      <?php  foreach ($black_a as $name => $black_p) {

        ?>
        <option value="<?php echo $black_p['name'];?>" data-symbol="<?php echo $black_p['symbol_native']; ?>"><?php echo $black_p['name'];?></option>
      <?php } ?>
    </select>
  </div>
  <div class="">
    <label for="to_c">to currency</label>
    <select class="mdb-select colorful-select dropdown-primary" name="to_c"  style="width:200px;" >
      <?php  foreach ($black_a as $name => $black_p) {

        ?>
        <option value="<?php echo $black_p['name'];?>"><?php echo $black_p['name'];?></option>
      <?php } ?>
    </select>
  </div>
  <input  name="transfer" value="convert"  class="btn btn-elegant" style="margin-top:3%;" id = "ha" /> 

</form>

提交表单时，我有以下PHP代码：

  <?php
    if(isset($from_c) &&$from_c ==$to_c && isset($to_c) && $to_c == $from_c){

      echo   "
        <div id='less' class='well'>
          <div  dir='RTL'>
          <ul class='text-right'>
            <li><strong>resultل</li>

          </ul>
        <div class='col-md-4'>
          <div class='msg msg-success msg-success-text'> <span class='glyphicon glyphicon glyphicon-ok'></span> Error !</div>
        </div>
      ";
    }
  ?>

我尝试使用AJAX，单击提交后页面仍然刷新：

$('#ha').on('click', function (e) {

  e.preventDefault(); //prevent to reload the page

  $.ajax({
    type: 'POST', //hide url
    url: 'convert.php', //your form validation url
    data: $('#frmData').serialize(), //USE THE ID WE SET IN THE FORM
    success: function (response) {
      $(".mydiv").append(response); 
    }
  });

});

.mydiv：

<div  class='mydiv'>
  <div  dir='RTL'>
    <ul class='text-right'>
      <li><strong>result</li>

    </ul>
  <div class='col-md-4'>
    <div class='msg msg-success msg-success-text'> <span class='glyphicon glyphicon glyphicon-ok'></span> $amount</div>
  </div>

我也尝试使用，iframe但是单击“提交”按钮时没有任何反应。

如何使它起作用并显示第二个PHP代码中if语句中的消息？