javascript - 表单提交时未调用 Ajax 函数

Question

我是这方面的初学者，所以请原谅我，如果我只是愚蠢。

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

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"/>

结果.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>'; 
?>