没有在表单提交上调用Ajax函数

Question

如果我只是愚蠢的话，我是初学者，请原谅我。

所以基本上我在使用ajax提交表单后尝试使用php文件中的信息重新加载div，这就是我所拥有的。

的index.php

<script type="text/javascript">
$('#searchForm').submit(function(event){
  $.ajax({
    url: 'result.php',
    type: 'post',
    dataType:'html',   //expect return data as html from server
    data: $('#searchForm').serialize(),
    success: function(response, textStatus, jqXHR){
      $('#underInput').html(response);
     },
  error: function(jqXHR, textStatus, errorThrown){
  console.log('error(s):'+textStatus, errorThrown);
  }
 });
 });
</script>

    <form class="form-group" id="searchForm" onsubmit="return false">
        <div class="input-group">
            <input id="search" class="form-control" name="user" type="text" placeholder="Enter instagram username">
            <span class="input-group-btn">
            <button class="btn btn-primary" id="submit" type="submit">Sök</button>
            </span>
        </div>
    </form>
        <div id="underInput"/>

result.php

//dont want to show calculation for therate here
echo '<h2><?php echo $_POST["user"]?> can charge <?php echo $therate?>€ per 
post</h2>';    

点击提交时没有任何反应，为什么？

Answer 1

点击使用而不是提交

示例 -

 $(document).ready(function(){
    $('#submit').on("click", function(event){
      $.ajax({
        url: 'result.php',
        type: 'post',
        dataType:'html',   //expect return data as html from server
        data: $('#searchForm').serialize(),
        success: function(response, textStatus, jqXHR){
          $('#underInput').html(response);
         },
      error: function(jqXHR, textStatus, errorThrown){
      console.log('error(s):'+textStatus, errorThrown);
      }
     });
     });
});

然后用这段代码替换你的php代码

<?php
echo '<h2>'.$_POST["user"].' can charge '.$therate.' € per 
post</h2>'; 
?>