使用 AJAX 时页面不断刷新

我正在创建一个包含表单的模式框。使用 ajax 和 php 提交后，表单将返回输入，然后模式框应该消失。问题是，结果在框消失和页面刷新之前显示了几秒钟。

<button class="toggleModal">trigger iModal</button>

<div class="modal">

<header>
  <h2>Other Symptoms</h2>
  <i  class="fa fa-times close toggleModal"></i>
</header>

<section>     
   <form class="js-ajax-php-json" method="post" accept-charset="utf-8">
    <textarea name="textareathebeast"  row="4" cols="40" placeholder="some text"></textarea><br>
    <input class="modalSubmit" type="submit" name="submit" value="submit">
  </form>
</section>

</div>

<div class="the-return">
  [HTML is replaced when successful.]
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

>

$(function(){  

$('.toggleModal').on('click', function (e) {

     $('.modal').toggleClass('active');

});

$(".js-ajax-php-json").submit(function(){
var data = {
  "action": "test"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
  type: "POST",
  dataType: "json",
  url: "response.php",
  data: data,
  success: function(data) {
    $(".the-return").html(
      "Text Message: " + data["textareathebeast"]
    );
  }
});
return true;    
});

});
</script>    

<

<?php
  if (is_ajax()) {
    if (isset($_POST["action"]) && !empty($_POST["action"])) { //Checks if action value exists
      $action = $_POST["action"];
      switch($action) { //Switch case for value of action
        case "test": test(); break;
     }
  }
}

//Function to check if the request is an AJAX request
function is_ajax() {
   return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

function test(){
  $return = $_POST;

//Do what you need to do with the info. The following are some examples.
//if ($return["favorite_beverage"] == ""){
//  $return["favorite_beverage"] = "Coke";
//}
//$return["favorite_restaurant"] = "McDonald's";

$return["json"] = json_encode($return);
echo json_encode($return);
}
?>

看起来刷新的原因是因为你调用了提交函数而没有阻止该行之后的默认操作$(".js-ajax-php-json").submit(function(){你需要阻止它：

e.preventDefault();

如果没有，您可以尝试阻止默认附加到单击事件而不是提交事件。